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

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

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

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


●質問者: onigirin
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:CSS サイト リピート 画像 背景色
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● kent0608
●23ポイント
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);
}

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

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

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

◎質問者からの返答

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

確かに、その形式です。

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

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

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

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

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

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


2 ● pirakichi
●23ポイント

TypePadのレイアウト構造

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

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

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

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

◎質問者からの返答

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

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

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


3 ● sigeos15
●22ポイント

div#wrap → ページ全体

div#head → ヘッダー部分

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

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

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

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

◎質問者からの返答

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

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

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

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

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


4 ● すずか
●22ポイント

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

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にしてください。

◎質問者からの返答

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

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

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

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

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

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

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

関連質問


●質問をもっと探す●



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