スタイルシートにて、ＨＰの背景に上部はイメージ画像の水平繰り返しで、そのイメージより下の部分には別のイメージのタイル貼り背景で、例えば、上部背景には青空と砂浜の海のイメージを水平方向に繰り返し、その砂浜のみのイメージを砂浜より下に繰り返し垂直にのせて、縦長のページでもずっと下まで砂浜が続くようなことは出来ないでしょうか？ 説明が悪くてすみません。よろしくお願いします
No.2
142
15
24pt
可能だと思います。
bodyに砂浜画像を背景指定し、全部のコンテンツを含むdiv要素に空と海の画像をtop位置、横リピートのみとして背景指定すれば良いかと。
参考
14
13
body {
background-image: url(砂浜.jpg);
background-repeat: repeat;
}
body #wrap {
background-image: url(空と海.jpg);
background-repeat: repeat-x;
}
<body>
<div id="wrap">
<div id="container">
ここにコンテンツを入れます。
</div>
</div>
</body>
No.1
332
22pt
考え方としては、
空
水平線
海
波打ち際
砂浜←これの画像を繰り返し
ってことですよね。
であれば、
-----------------
空
水平線
海
波打ち際
砂浜
-----------------
を一枚の画像でどーんと置いて、
同じ横幅の砂浜の画像を背景に指定して、垂直に繰り返せば実現出来そうな気がします。
こんな解答で良いでしょうか。
No.2
14215
ここでベストアンサー
24pt
可能だと思います。
bodyに砂浜画像を背景指定し、全部のコンテンツを含むdiv要素に空と海の画像をtop位置、横リピートのみとして背景指定すれば良いかと。
参考
body {
background-image: url(砂浜.jpg);
background-repeat: repeat;
}
body #wrap {
background-image: url(空と海.jpg);
background-repeat: repeat-x;
}
<body>
<div id="wrap">
<div id="container">
ここにコンテンツを入れます。
</div>
</div>
</body>
ありがとうございます。しかし、下記の様にやってみましたが、砂しか出ません、どうすれば良いでしょうか？教えて下さい
No.3
14215
22pt
あああっ！！ごめんなさい！
cssミスが一点！ポジションでtop指定を追加してください（滝汗）。
それから、画像は出ていないのではなく、
今はコンテンツがなにもないので、文字の高さ分しか表示されていない
（＝高さ指定がないと全部は見えない）というだけです。
（コンテンツが入ればその分、高さが出て来るのでheightは不必要）
仮で300pxとして入れてみましたが、
これで大丈夫でしたよ。
body #wrap {
background-image: url(suna.jpg);
background-repeat: repeat-x;
background-position: top;
height: 300px;
}
あー・・びっくり。本当にすみませんでした。
もしまた何かミスがありましたら、仰って下さいね。
1
2
ありがとうございます。しかし、下記の様にやってみましたが、砂しか出ません、どうすれば良いでしょうか？教えて下さい
http://www.chemifelt.jp/newpage2.html