サイドバーの背景画像(CSS)

Question

以下のＣＳＳのソースなのですがサイドバーに
http://www.01kaisha.com/img/main/main01_r2_c3.jpg
を背景として使いたいのですがメインのほうに背景がいってしまい
サイドバーで表示する事が出来ません。

どのようにすればサイドバーにhttp://www.01kaisha.com/img/main/main01_r2_c3.jpg
を使用することが出来るのでしょうか？
どなたか分かる方いらっしゃいましたら教えてください、お願いします<(_ _)>

body{
margin: 0px;
padding: 0px;
background-image: url(http://www.01kaisha.com/img/main/main01_r2_c3.jpg);
background-repeat: repeat-y;

}

.main{
width: 642px;
position: absolute;
left: 0px;
}

.side{

margin-left: 642px;
}

partita · Accepted Answer

#3です。

背景画像は前出の例ならば、横800ピクセルの画像です。background-repeat: repeat-y;はこれでOKです。

説明しにくいのですが、背景画像を縦100ピクセル・横800ピクセルで作成するとします。右から158ピクセルの領域には、main01_r2_c3.jpgの繰り返し画像を配置します。これは地道に配置するのが早いと思います。

できあがった画像をwrapの背景画像として使用します。念のためsideに
background-image:transparent;
を設定したほうがいいかも。
または
background-image:inherit;
だったかな？あいまいな回答ですみません。


わかりますか・・・？

partita · Answer

として（面倒だからdiv省略してます）、wrapに背景画像を適用します。mainの幅が642pxですよね。sideの幅が158pxだとすると、800px（縦は任意）の背景画像を使用します。 hirofujiさんがが困っているのは、mainの縦幅に応じてsideが可変にならないからですよね。main、sideどちらが縦に長くなっても対応する必要があるので、上記のような方法を使います。説明がわかりにくかったらごめんなさい。

bavarois · Answer

もしかして・・・。

body{
margin: 0px;
padding: 0px;
}

.main{
width: 642px;
position: absolute;
left: 0px;
}

.side{
margin-left: 642px;
background-image: url(http://www.01kaisha.com/img/main/main01_r2_c3.jpg);
background-repeat: repeat-y;
}

違いますか？

noname#20378 · Answer

具体的なHTMLソースも示してもらえると有難いですが


>background-image: url(http://www.01kaisha.com/img/main/main01_r2_c3.jpg);
>background-repeat: repeat-y;
は何故body要素に適用しているのでしょうか？

body{
margin: 0px;
padding: 0px;
}

.main{
width: 642px;
position: absolute;
left: 0px;
}

.side{
margin-left: 642px;
background-image: url(http://www.01kaisha.com/img/main/main01_r2_c3.jpg);
background-repeat: repeat-y;
}
ならまだ解るのですが。

>margin-left: 642px;
蛇足ですが個人的にこの記述も何か違うなーと印象が強かったりします。ひょっとしてこれ「右サイドバー」かな？floatを使うほうが理想的なのかもしれないです。詳しく知りたい場合は参考URLを見てください。やや難しいかもしれませんが。

参考URL：http://www.geocities.jp/multi_column/index.html

サイドバーの背景画像(CSS)

#3です。

<body>

もしかして・・・。

具体的なHTMLソースも示してもらえると有難いですが

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング