1178678150 スタイルシートにて、HPの背景に上部はイメージ画像の水平繰り返しで、そのイメージより下の部分には別のイメージのタイル貼り背景で、例えば、上部背景には青空と砂浜の海のイメージを水平方向に繰り返し、その砂浜のみのイメージを砂浜より下に繰り返し垂直にのせて、縦長のページでもずっと下まで砂浜が続くようなことは出来ないでしょうか? 説明が悪くてすみません。よろしくお願いします

回答の条件
  • 1人3回まで
  • 登録:2007/05/09 11:35:51
  • 終了:2007/05/09 21:45:26

ベストアンサー

id:blanccasse No.2

blanccasse回答回数142ベストアンサー獲得回数152007/05/09 15:13:52

ポイント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>
id:pxu07043

ありがとうございます。しかし、下記の様にやってみましたが、砂しか出ません、どうすれば良いでしょうか?教えて下さい

http://www.chemifelt.jp/newpage2.html

2007/05/09 17:04:14

その他の回答(3件)

id:schahrazade No.1

schahrazade回答回数33ベストアンサー獲得回数22007/05/09 14:09:18

ポイント22pt

考え方としては、

水平線

波打ち際

砂浜←これの画像を繰り返し

ってことですよね。

であれば、

-----------------

水平線

波打ち際

砂浜

-----------------

を一枚の画像でどーんと置いて、

同じ横幅の砂浜の画像を背景に指定して、垂直に繰り返せば実現出来そうな気がします。

こんな解答で良いでしょうか。

id:blanccasse No.2

blanccasse回答回数142ベストアンサー獲得回数152007/05/09 15:13:52ここでベストアンサー

ポイント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>
id:pxu07043

ありがとうございます。しかし、下記の様にやってみましたが、砂しか出ません、どうすれば良いでしょうか?教えて下さい

http://www.chemifelt.jp/newpage2.html

2007/05/09 17:04:14
id:blanccasse No.3

blanccasse回答回数142ベストアンサー獲得回数152007/05/09 17:29:01

ポイント22pt

あああっ!!ごめんなさい!

cssミスが一点!ポジションでtop指定を追加してください(滝汗)。

それから、画像は出ていないのではなく、

今はコンテンツがなにもないので、文字の高さ分しか表示されていない

(=高さ指定がないと全部は見えない)というだけです。

(コンテンツが入ればその分、高さが出て来るのでheightは不必要)

仮で300pxとして入れてみましたが、

これで大丈夫でしたよ。

body #wrap {
	background-image: url(suna.jpg);
	background-repeat: repeat-x;
	background-position: top;
	height: 300px;
	}

あー・・びっくり。本当にすみませんでした。

もしまた何かミスがありましたら、仰って下さいね。

id:kazuhiko11 No.4

kazuhiko11回答回数13ベストアンサー獲得回数12007/05/09 18:17:49

ポイント22pt

こんな感じですか?

http://www.geocities.jp/akazu11/

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません