- ベストアンサー
CSSによる背景画像のセンタリング。IE以外ではうまくいかない
背景画像をセンタリングしたいのですが、以下のCSSソースでは、IE以外（firefoxなど）は左右しかセンタリングされません。 body{margin:0; padding:0; text-align:center; background-repeat: no-repeat; background-position: center center; background-image:url(../images/back5.jpg)} CSSハックを使って、個々のCSSを書くしかないんでしょうか？ よろしくお願いいたします。
- nashicana
- お礼率57% (15/26)
- CSS
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
バグなのか何なのか…、Geckoはどうも1.8系から解釈が変わったようですね。 background-attachment:fixed;を指定しないと縦幅を取得しないみたいです。 つまり縦幅が分からないから相対値指定でわけの分からない位置指定になる、ということ。 問題はbackground-attachment:fixed;の指定か、background-positionの縦位置を絶対値で指定することにより解決します。 尚、Opera9で確認したところ解釈はほぼ同様でした。
その他の回答 (1)
- kancil
- ベストアンサー率27% (26/95)
対策として、これではどうでしょうか？ bodyに直接背景を指定するのではなく、DIVに記入します。 例） <body style="margin:0"> <div style="background-position:center;background-repeat: no-repeat;background-image:url(xxx.jpg);width:100%;height:100%;"> aaa </div> </body>
お礼
御返答ありがとうゴザイマス。 この方法でも背景画像はセンターに来てるみたいですが、手前のボックスに対しての重なりが今度は崩れるみたいでした。divの書き方の問題でしょうか。 問題解決いたしました。ありがとうゴザイマス。
関連するQ&A
- 背景画像
つい先日もこちらで教えていただいたのですが、また分からないのでよろしくお願いします。ビルダー11を使っています。 <style type="text/css"> <!-- body { margin:0px; padding:0px; text-align:center; } #main { margin-left:auto; margin-right:auto; text-align:left; width:650px; } --> </style> </head> <BODY background="080aosirobudou_300.jpg" style="background-repeat:no-repeat"> htmlで全体を真ん中にして、画像はリピートしないようにしていますが 画像の下半分が切れてしまいます。画像を小さくするしかないでしょうか？（加工OKなものを使っています）それと出来れば画像を右端によせたいのですが、上記htmlに <STYLE TYPE="text/css"> <!-- BODY{background-image:url(画像url); background-position:right} --> </STYLE> とすると、画像やスタイルがつぶれます。どうすればよいのでしょうか？ただいま勉強中のため、できましたら素人にも分かりやすく答えていただければありがたいです。よろしくお願いします。
- 締切済み
- その他（インターネット・Webサービス）
- firefoxでcssを使った時背景画像が表示されない
CSSでfloatを設定し、その中のそれぞれに背景画像を表示しようとすると、上手くいきません。 背景画像も背景色も表示されません。 構文に間違いがあるのでしょうか？ それともそのような仕様なのでしょうか？ よろしくお願いいたします。 ###CSS### #container { width: 900px; background-image: url(images/back.jpg); background-repeat: no-repeat; } #header { width: 900px; } #contents { width: 748px; background-color: #FFFFFF; background-image: url(images/image.jpg); background-repeat: no-repeat; background-position: top; padding: 0px; margin-left: 76px; } #footer { clear: both; width: 748px; margin-left: 76px; } #sidebar { float: left; background-image: url(images/side.jpg); width: 180px; margin-top: 14px; background-color: #FFFFFF; } #main { float: right; width: 568px; padding: 0px; background-color: #FFFFFF; background-image: url(../images/image2.jpg);
- 締切済み
- HTML
- IE7で閲覧した際にCSSで配置した背景画像がずれる
スタイルシートにて、 以下のように設定して背景画像を表示させているのですが、 body { font-size: 70%; line-height: 140%; word-spacing: 1pt; margin: 0; padding: 0; text-decoration: none; text-align: center; letter-spacing: 0.1em; background-image: url(../images/body_bg.gif); background-color: #FFFFFF; background-repeat: repeat-y; background-position: center top; } マックのsafari、firefox、WINのIE6、firefox等では問題なく センターに背景画像が配置されて表示されるのですが、 IE7で表示すると、横に余分な空白が生じて、 背景画像のみが左のほうにずれてしまいます。 おおよそですが、bodyの横幅が右に2倍に 増えている感じで、スクロールバーを右に動かすと、 意味のない空白ができています。 IE7のハックというものを使用して、上記のbodyタグの下に 背景画像の設定を外した、下記の記述を追記し、 さらに、.bodybgというクラスタグで 背景画像を設定してみたのですが、結果は同じでした。 *:first-child+html body { font-size: 70%; line-height: 140%; word-spacing: 1pt; margin: 0; padding: 0; text-decoration: none; text-align: center; letter-spacing: 0.1em; background-color: #FFFFFF; } *:first-child+html .bodybg { background-image: url(../images/body_bg.gif); background-repeat: repeat-y; background-position: center top; } どうしたら、背景画像のずれが直るのでしょうか？ また、このバグはbodyタグではなく、その他のスタイルが 影響しているのでしょうか？ どなたかご存知の方お教え願えませんでしょうか。 よろしくお願い致します。
- 締切済み
- HTML
- IE,Firefoxでbodyの背景画像が表示されません。
IE8とFirefox3.0で、 cssでbodyに入れている background-image、background-colorがどちらも適用されません。 Sleipnir2.8.5ではきちんと表示されます。 ですので、htmlはあっているかと思います。 一通り、タグぬけがないかとかも、調べてみましたが、 特にないようです。 いろいろ調べてみましたが、わかりません。 hasLayout対策とかも試してみました。 （width や position をいれるなど） 下記がbodyのcssです。 body { color: #333; text-align: center; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; background-color: #FFFF66; background-image: url("img/bg.jpg"); background-position: center top; background-repeat: repeat-y; margin: 0px; } 教えていただけると、 大変助かります。 よろしくお願いいたします。
- 締切済み
- その他（プログラミング・開発）
- CSSのリスト 背景画像が表示されません
横並びのメニューを作成したいと思っています。 text-indent:-999pxを利用して、背景画像のみを表示させようとしているのですが、h1はうまくいくもののリスト(li)についてはまったく表示されません。 ちなみにtext-indentを使用しなければ背景画像は表示されますが、かなり画像が下にずれ込んでしまっています。 よろしくお願いします。 #header h1 { margin: 5px 0 0 20px; padding: 0; width: 248px; height: 143px; float: left; text-indent: -9999px; font-size: 130px; background: url(../images/logo.jpg) no-repeat #FFFFFF; background-position: center; } ul { margin: 0; padding: 0; width: 635px; height: 54px; } li{ float: left; list-style: none; margin: 0; padding: 5px; font-size: 50px; text-indent:-999px; } li#top { background: url(../images/menu/top.jpg) no-repeat; }
- ベストアンサー
- HTML
- 背景画像がきれます
以前お聞きしたのですが、再度問題が出たのでよろしくお願いします。 <style type="text/css"> <!-- body { margin:0px; padding:0px; text-align:center; } #main { margin-left:auto; margin-right:auto; text-align:left; width:650px; } --> <!-- BODY{background-image : url(画像url); background-position:right top;} --> </style> </head> <BODY background="画像url" style="background-repeat:no-repeat"> でhtml書くと希望通り右上に画像が出たのですが、ずいぶん画像を小さくしなければなりません。もう少し大きくすると画像が切れてしまいます。今の状態で（小さい画像）では、実際サイトを見ると小さく画像の部分だけ区切ったような感じに見えます。どうすれば画像が区切ったような感じにならないのでしょうか？上記htmlが間違っているのでしょうか？それともう少し大きくして画像が切れない方法はないのでしょうか？よろしくお願いします。
- 締切済み
- その他（インターネット・Webサービス）
- css: IEでsidebarが表示されない
cssで2カラムのページを左右を両方floatさせて作っています。 firefoxでは表示されるsidebar（背景、画像、テキストを含むすべて）がIE7では表示されません。clearfixの問題かと思いclearfixを入れてみましたがうまくいきませんでした。 どうしたらよいかご存知の方がいたら教えてください。よろしくお願いします。 ちなみにCSSの主要部分は以下のとおりです。 /*--- container ---*/ #container {position: relative; background:url(images/background.jpg) repeat-y; width: 800px; hight: 600px; padding: 0; margin-left: auto; margin-right: auto; text-align: left; border: 0; } /*--- header ---*/ #header {width: 800px; height: 107px; margin:0;} /*--- side-bar ---*/ #side-bar{position:absolute; background: transparent url(images/menu_bckgrnd.png) center center no-repeat; width: 150px; padding:0; float:left;} #side-bar ul { margin: 0; padding: 50px 50px 50px 50px; ist-style: none; width:30px;} #side-bar li { margin: 0; padding: 0;} #side-bar li a{ display:block;} #side-bar a:hover{position: relative; top: 1px; left: 1px;} /*--- main-nav: content area ---*/ #main-nav {background: url(images/design.png) top left no-repeat; width: 610px; margin-top: 0 0 0 150px; padding: 0 10px 0 30px; float:right;} #main-nav a:hover {position: relative; top: 1px; left: 1px; } #content1{ float:left; width:200px; margin: 0 2px 20px -20px; background:#fff;} #content2{ float:left; width:200px; margin: 0 2px 20px 2px; background:#fff;} #content3{ float:left; width:200px; margin: 0 2px 20px 2px; background:#fff;} /*--- footer ---*/ #footer {width: 800px; height: 100px; background: transparent; margin: -100px 0 0 0; clear: both; text-align:center; padding-top:50px;} /* -- clearfix -- */ .clearfix{ zoom:1; } .clearfix:after{content:'.'; display:block; visibility:hidden; height:0; clear:both;}
- ベストアンサー
- CSS
- FFとIEでスクロールバー、背景画像を表示しセンタリングするときのズレ
IE7とFF3とOpera9で表示確認をしています。 スクロールバーを常時表示し、背景をセンタリングしたデザインをしたいと考えています。 FF3でスクロールバーを表示すると、背景よりボックスが1px右にずれてしまいます。 IEはもともとずれるのが判っているのでハックを使って調節しています。 Operaだと理想どおりに表示されます。 仕方が無いのでFFもハックして表示しました。 ソースは以下のとおりです。 実際こんなにハックしなくとも、スマートに表示できる方法があるのでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <style> <!-- body{ margin: 0; paddin:0; background-image:url(design/bg4.jpg); background-repeat:repeat-y; background-position:center; } /* firefoxのハック */ body,x:-moz-broken { margin-left:-1px; overflow-y:scroll; } /* IE7のハック */ *:first-child+html body { padding-left: 2px; overflow-y:auto; } /* IE6以下のハック */ *html body { overflow-y:auto; padding-left: 1px; } .base{ margin:auto; width:750px; background-color:red; } --> </style> </head> <body> <div class="base"> <p> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p> </div> </body> </html> 何かわかることがありましたら、よろしくお願いしたします。
- ベストアンサー
- HTML
- CSSのリストタグでメニューを作ってますがレイアウトが崩れます
CSSでリストタグを使ってメニューを作成してますが、Firefoxだとメニューの幅が広く表示され本文にかぶってしまいレイアウトが崩れてしまいます。ちなみにレイアウトは2段組です。 #menu{ text-align: left; width: 175px; float: left } #menu #text ul{ list-style-type: none; margin: 0; padding: 0; border-top: 1px solid white } #menu #text li{ background-image: url("../navi_yajirusi.gif"); background-repeat: no-repeat; background-position: left center; margin: 0; padding: 0; border-bottom: 1px solid white } #menu #text li a{ color: #fff; text-decoration: none; background-color: #1b328d; background-image: url("../navi_yajirusi.gif"); background-repeat: no-repeat; background-position: left center; display: block; padding: 10px 0 10px 10px; width: 175px } #menu #text li a:hover { color: #fff; background-color: #ff0; background-image: url("../navi_yajirusi.gif"); background-repeat: no-repeat; background-position: left center } どなたか詳しい方よろしくお願いいたします。
- 締切済み
- HTML
- ＩＥでCSSを用いてテーブルをセンタリングしたい。
という質問内容なのですが・・・ 条件は、 Windows 3.1/NT3.51 IE4～IE5 Win32 IE4～IE5.0x でCSSだけを用いてセンタリングしたいのですが どうしてもうまくいかないのです・・・ IE用では <DIV style="text-align: center"> CSS準拠では <TABLE style="margin-left: auto; margin-left: right"> があります・・・ 上記は、IE5.5、IE6、ネスケ６、７、もじら、Opera６，７で 確認してます。 CSSのみの利用なので、<CENTER>、<DIV align="center">は使わない方法で 知ってる方はいらっしゃいませんか？
- 締切済み
- HTML
お礼
ありがとうございます。 background-attachment:fixed;を追加したら一発でセンタリングされました。