CSSで背景画像の幅を指定したい

質問

お世話になります。
現在CSSを猛勉強中なのですが、検索してもひっかからず、悩んでいるので質問させてください。

cssでは

　　#maincontents{ width:760px;}
　　#background-image: url(../img/haikei.jpg);

HTMLでは

　　<div id="maincontents">
　　</div>

としているのですが、反映されず、背景はウィンドウを横に伸ばせばのばしただけ広がってしまいます。
Yahooなどのように縦長のHPを作りたいのですが困っています。
お分かりになるかたがいましたらお答えいただけたら幸いです。

回答No.2

suzuko · ベストアンサー

#maincontents{ width:760px;}
#background-image: url(../img/haikei.jpg);
では無理でしょうね。
これでは、<div id="maincontents"></div>での命令はwidth:760pxだけだと思いますよ。

画像が760pxより小さいのでしょうか？
もし、１度だけの表示にしたいなら
#maincontents{
width:760px;
background-image: url(../img/haikei.jpg);
background-repeat: no-repeat;
}
とされてはどうですか？

がんばって～

お礼

どうもありがとうございます。試したところうまくいきました。ほんとにありがとうございます。

この指定した背景をブラウザの中心にもっていくにはどうしたらいいか？おわかりであれば教えてください。

また新しい質問をして回答を得たほうがいいのですか？goo初心者でもあるので、、、

回答No.3

suzuko

絶対中央（プラウザがどの幅でも）なのでしょうか？
未検証ですが、

background-position: center center;

をCSSの
#maincontents{
width:760px;
background-image: url(../img/haikei.jpg);
background-repeat: no-repeat;
}

の中に加えれば、いけると思います。
水平方向だけが中央なら

background-position: center;

だけですが。

※追加質問について、
前回の回答者が必ずすぐに答えてくれるとは限らないので別にスレッドを立てた方が、急ぎの質問の場合はいいですよ。

お礼

ほかのログを検索しましたところ、widthを100％というように％表示させる！という記事を参考に実験したところ、うまくいきました。

追加質問についてのアドバイスもありがとうございます。

補足

ご回答ありがとうございます。

background-position: center center;
background-position: center ;

を入れてみましたが、widthの中央にくるだけで、
プラウザがどの幅でも中央にくるようにはできませんでした。

回答No.1

crepon133

maincontents の背景画像で良いのなら

#maincontents{
width:760px;
background-image:url(../img/haikei.jpg);
}

お礼

ありがとうございます。