CSSの背景画像のセンタリング

私が取り組んでいるウェブサイトTamsnails.comはちょうど終わったばかりですが、私はしばらくの間悩まされている1つの問題があります。店の背景画像は、私の高解像度の仕事用ラップトップの全画面に単純に伸びません。私は、数ヶ月の最後のカップルの上に私が忘れているの多くを多くのことを試してみたが、私が最初に覚えCSSの背景画像のセンタリング

は、私は、実際のCSSとしてbackground-img

それを持っていた、私は

を持っていましたmainbackgroundスタイルで

<head> 
<body id="theBody"> 
<div id="backgroundImageWrapper" style="height: 100%; width: 100%; z-index: 0; position: absolute;"> 
<img id="mainBackgrond" src="background_image.JPG"> 
</div>

#mainBackgrond { 
    height: 100%; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    z-index: -1; 
}

今、私が持っている

スタイル

#mainBackgrond { 
    height: 50em; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    z-index: -1; 
}

と

これは、少なくとも私の自宅のラップトップ上で良く見えるので。

はい、私は 'mainBackgrond'の間違いを覚えています。

出典

2011-07-09 marklar

質問がありますか？ – joseph

HTML5を使いたいと思わない限り、できるとは思いません。

参照：css scaled background image参照のこと。

編集：FYI、「高さ：100％」を使用すると、の内容がの高さの100％に伸び、ウィンドウではなくなります。あなたはこれを見て（または他の同様のjQueryプラグインを）取ることをお勧めします

出典

2011-07-09 01:57:05 SirNickity

問題は、画像が、その後に自分の#mainBackgrondスタイルにheight: 50emを変更する（私はChromeで見ているものをしている）ウィンドウの下部にストレッチしないことがある場合：

height: 100%;

出典

2011-07-09 01:56:27 Town

これをインスペクタで変更しようとしましたか？私はすでにそれを試みたと信じて、実際には画像を上に上げてしまいます。 – marklar

@marklar：うん、私にはうまく見える。画像のアスペクト比はどこにでもありますが、それは画像を任意のサイズのウィンドウに合わせて伸ばしたい場合に得られるものです！:) – Town

ファイヤーバグでは、イメージはブラウザのサイズに合っていますが、ブラウザは垂直スクロールを許可しています。その下にはグレーの背景だけがあります。誰かが私のような小さな画面を持っていれば、彼らは下にスクロールする必要があるので、私はそれも残りの部分を埋めるようにしたいと思う。 – marklar

http://srobbin.com/blog/jquery-plugins/jquery-backstretch/#demo - 使用するのは非常に簡単であり、それはアスペクト比を危険にさらすことなく、完全に背景画像を伸縮します。

出典

2011-07-09 02:42:47 Joonas

高さプロパティを削除しようとします。この方法で、アスペクト比が維持され、画面全体にわたって伸びます（これが意図の場合）。

#mainBackgrond { 
    position: fixed; 
    z-index: -1; 
    width: 100%; 
    left: 0px; 
    top: 0px; 
    background: url(/background_image.JPG) no-repeat center center fixed; 
}

背景画像自体が巨大で、かつ初期ロード時間が非常に遅くなり、あなたはより多くのそれを圧縮したり、サイズ変更を検討してください。

また、背景を見るための解像度さえないかもしれない小さな画面の訪問者のための異なるサイズの背景画像を表示する良い方法は、を見てください。

@media screen and (max-device-width: 480px) { 
    .column { 
    float: none; 
    } 
}

出典

2011-07-09 02:43:38

CSSの背景画像のセンタリング

答えて

関連する問題