背景画像をいろいろやる

2007年05月04日作成

ども、管理人です。今回は以前いただいた質問とそれに私が返した答えをのせてみます。

いただいた質問は

「背景画像を表示して、さらに左右にそれぞれ違う背景画像を並べて表示するにはどうすればいいですか？」

というかんじのものでした。

確かにこの私のサイトではHTMLとかスタイルシートの文法は載せても

応用例とか組み合わせたものとかはやっていなかったので

はじめたばかりの人には難しかったかもしれません。

この質問を受けて作成したページがこちらです(別窓)

ちなみに背景画像はArt-Flash 加工自由な壁紙と素材様からいただいています(残念ながら閉鎖したようです)。

スタイルシートをやっているとわかってくると思いますが

spanタグやdivタグは超便利です。今回も使ったのはdivタグだけです。

全体の背景画像、左側の背景画像、右側の背景画像の3つに分けてクラスをつくり

あとはdivタグを3つならべるだけでできています。

ソース例では説明用にページにスタイルを書いていますが

普通はスタイルシートファイルに書いてそれをリンクします。スタイルシートファイルについてはここ。

<html>
<head>
<title>背景＋右側に別の背景を表示する</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">

.haikei {
background-image:url(img/haikei1.jpg);
background-repeat:no-repeat;
width:100%;
height:100%;
}

.rightrepeat {
background-image:url(img/migi1.jpg);
background-repeat:repeat-y;
background-position:right top;
width:100%;
height:100%
}

.leftrepeat {
background-image:url(img/hidari1.jpg);
background-repeat:repeat-y;
background-position:left top;
width:100%;
height:100%
}

.fontsize1 {
font-size:30px;
}

</style>
</head>
<body>

<div class="haikei">
<div class="rightrepeat">
<div class="leftrepeat">

<span class="fontsize1">全体の背景、そして左右に違う背景が表示されています。</span>

</div>
</div>
</div>

</body>
</html>

ソースに出てくるスタイルシートは以下のページで解説してあります。

背景画像を指定する、背景画像を一枚だけ表示する、背景画像を好きな位置に縦方向に繰り返し表示する

あなたも「こんなことがやりたいけどできない」

ということがありましたら、こちらのフォームからどうぞ。

質問する場合は「こんなことをやりたくて、ここがうまくいかない」

というのをできるだけ詳しく書いてください。

ただし満足いく回答ができるかどうかは保障できません。

プロではありませんので。そのあたりはあらかじめご了承ください。

ここまで読んでいただきありがとうございました。

＜＜「メールを送るときのマナー」へ　　　　　「スタイルシートファイルの使い方」へ＞＞

ホームページ作成とHTML初心者＞＞管理人コラム＞＞背景画像をいろいろやる