人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

1178678150
●拡大する

●質問者: pxu07043
●カテゴリ:インターネット
✍キーワード:すみません にの イメージ スタイルシート タイル
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● schahrazade
●22ポイント

考え方としては、

水平線

波打ち際

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

ってことですよね。

であれば、

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

水平線

波打ち際

砂浜

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

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

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

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


2 ● blanccasse
●24ポイント ベストアンサー

可能だと思います。

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>
◎質問者からの返答

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

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


3 ● blanccasse
●22ポイント

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

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

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

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

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

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

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

これで大丈夫でしたよ。

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

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

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


4 ● kazuhiko11
●22ポイント

こんな感じですか?

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ