CSSで、画像を指定する方法について。


サイトの上部に、横リピートの画像を表示します。
そして、その下には背景色一色になりますが、
そこに別の画像をリピートして表示したいと思っています。

これを実現する方法があれば、お願いします。

回答の条件
  • 1人10回まで
  • 登録:2009/01/17 17:45:58
  • 終了:2009/01/19 17:45:05

回答(4件)

id:kent0608 No.1

kent0608回答回数220ベストアンサー獲得回数232009/01/17 18:37:07

ポイント23pt
html
---------
<div id="foo"></div>
<div id="bar"></div>
css
---------
#foo{
 background-image: url(path/to/back1.jpg);
 background-repeat: repeat-x;
}

#bar{
  background-image: url(path/to/back2.jpg);
}

質問文をそのまま解釈すると、上記のようになりますが・・・

なんとなく質問者さんが実現したいことと私の回答にズレが生じているような気がするので、

参考画像かなにかを添付されることをオススメします。

id:onigirin

どうもありがとうございます。

確かに、その形式です。

ただ、その背景の上に、「背景に関らず、内容を書く」ということを

やりたいと思っています。

例えば、この「はてな」のこの質問ページで、

背景として、上部のロゴ辺りの高さまでに「横リピート画像」があり、

その下の背景は「普通のリピート画像」を敷き詰めたいと思っています。

さらに、横リピートの画像の下端で区切ってコンテンツを作成したくないと思ってます。

2009/01/19 17:11:27
id:pirakichi No.2

pirakichi回答回数27ベストアンサー獲得回数32009/01/17 18:48:45

ポイント23pt

TypePadのレイアウト構造

http://www.sixapart.jp/typepad/inside/2005/10/001151.htmlの画像を参考に。

例えば、HTMLの方を#container{}と#container-inner{}などといった具合に入れ子構造にしておくと

#container{}のbackgroundとして横リピート、#container-inner{}のbackgroundとして別の画像を

リピートするといったことができます。

id:onigirin

どうもありがとうございます。

この場合、innerを表示する場所を、横リピートの「高さ」より下に設置する必要があります。

ですが、背景に関係なくコンテンツを載せたいので、うまく表示できないです。

2009/01/19 17:24:00
id:sigeos15 No.3

sigeos15回答回数19ベストアンサー獲得回数22009/01/17 22:18:03

ポイント22pt

div#wrap → ページ全体

div#head → ヘッダー部分

例えばこのように定義したとして、

横リピートの画像 → div#wrap {background:url(画像パス) repeat-x;}

その下のリピート → div#head {background:url(画像パス) repeat-y;}

このようにそれぞれに背景画像を指定してみてはいかがでしょうか。

id:onigirin

どうもありがとうございます。

「ヘッダ部分のコンテンツ」とは関係なく、ヘッダに画像を横リピートしたいと思っています。

イメージとしては、背景の上部に横リピートがあり、その下にタイル絵がリピートされている。

その上に、このはてなの質問ページが「載っている」というイメージです。

はてなのヘッダ部に横リピートを表示するのなら、この方法でうまくいくのですが・・・。

2009/01/19 17:26:03
id:hizki No.4

すずか回答回数58ベストアンサー獲得回数12009/01/17 23:30:52

ポイント22pt

こんなのはいかがでしょう。

bodyの指定で背景色と背景画像(リピートあり)を指定。

サイトの上部分にdivで横リピートの画像を指定。

●bodyタグの指定

margin:0;

padding:0;

background-color:#cccccc;(例:灰色)

background-image:url("img/***.gif") ;

※縦横リピートは初期値です。

●divタグの指定

margin:0;

padding:0;

background-image:url("img/***.gif") repeat-x;

※余白をつけないのであればmarginとpaddingの設定を0にしてください。

id:onigirin

どうもありがとうございます。

この場合、divタグにあわせてコンテンツを載せないといけなくなります。

例えば、横リピート画像が「縦100」の長さだとして、

ヘッダ部分のコンテンツを「縦100」で区切りたくなくて、

「縦150になったり、縦80になったり」という、柔軟性に対応したいと思っています。

横リピートをそこに表示すると、上に載せるコンテンツの高さによって

背景が変わってしまいます。

2009/01/19 17:18:56

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

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

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

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

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