CSSで大きな背景画像を表示するにはどうすればよいですか

私はquestionに私のコードに特有のこのことについて尋ねました。人々は本当に役に立ちましたので、私は問題は解決しませんでした。CSSで大きな背景画像を表示するにはどうすればよいですか

livingsocialのような大きなCSSの背景を取得しようとしています。
私が持っている1400 X 1050
私の現在の解像度があるイメージがある：1280 X 1024
私のイメージは下

質問（複数可）から切り離さばかり続け：いただきましたCSSを使用して大きな画像の背景を表示する最良の方法は？

私は4つの異なる解像度で同じ背景イメージを持っているし、その後、最良の現在の解像度、ユーザが（そのためのいくつかのスクリプトがあります）を使用してフィットした画像を使用する必要がありますか？
CSSを使用して拡大縮小している1つの大きな画像が必要ですか
他の人はどうやってこの問題に取り組んでいますか？

上記の3つのオプションのうち、すべての解像度でうまく動作するように、これを行う最も良い方法が何であるか知りたいと思っています。

出典

2011-08-16 yogashi

一般に、背景の一部は一意になりますが、解像度が問題にならないようにエッジがシームレスであることを確認してください。デザインが動作しているかどうかをテストするには、ページを縮小します。 –

1480x1050の画像を1280の幅に拡大すると、960が高くなります。それはあなたが見ているものですか？ – James

私は分かりませんが、それは一番下に切り取られています。私はまだそれを拡大していない。 – yogashi

CSS3ソリューション あなたはCSS3でbackground-originとbackground-sizeを使用することができますが、それはIE8下でサポートされていません。

あなたはGD2は、ユーザーのブラウザに特定の画像をスケーリングすることができ PHPソリューションは、このソリューションは、JavaScriptを伴うだろう。

リビングソーシャル・ウェイ 彼らはそれが固定<img/>タグとポジショニングで画像を挿入しています。

<style type="text/css"> 
#background { 
    z-index: -1; /* put it under everything*/ 
    position: fixed; /* make it stay in the same place, regardless of scrolling */ 
    top: 0; 
    left: 0; 
    overflow: hidden; /* clip the image */ 
    width: 100%; /* fill the full width of browser */ 
    min-height: 950px; /* show at least this much of the image */ 
} 
#background img { 
    width: 100%; 
} 
</style> 

<body> 
    <div id="background"><img /></div> 
    <div id="content"><!-- Your Content Here --></div> 
</body>

リビング社会は彼らの<img/>タグに適用されるいくつかのより多くのコードを持っていますが、それは、一種の冗長ようだ多分それは私がここでそれを示さなかった、より良いクロスブラウザのサポートのためです。

出典

2011-08-16 17:13:15

CSSを説明してくれてありがとう。しかし、彼らのテクニックを試してみると、私のイメージは一番下から切り離されています：http://jsbin.com/opokev/28 'overflow：hidden 'のせいかもしれませんが、私の解決策は何でしょうか？画像が縮小されないように画像を縮小する必要がありますか？ – yogashi

'overflow：hidden'は、' position：fixed'だけでなく '' overflow：hidden''もそれを打ち切る原因となります。バックグラウンドは必要以上に多くのスペースを占有します。やって –

新しい答えの例を使ってコードを修正しました。 http://jsbin.com/opokev/33 –

imgの幅と高さを指定してください。画像の中央で画像の中央が切り取られている場合は、それを指定してください。そうしないと、画像は画面サイズに応じて切り取られます。または、画面サイズに合わせてサイズを設定した場合は、引き伸ばされます。

出典

2011-08-16 17:01:32

CSS "背景"では、画像の拡大/縮小のサイズを指定できません。 http://www.w3schools.com/css/css_background.asp –

修正。彼は実際にそのためにHTMLを使用しなければなりません。 –

より正確に言えば、CSS2ではこれを許可していません。 CSS3はIE9を含むすべての主要なブラウザでサポートされています。 IE8以降のサポートはありません。 –

グーグル：CSSの自動サイズ調整の背景画像 http://css-tricks.com/3458-perfect-full-page-background-image/

出典

2011-08-16 17:19:02

私は実際に低く、すなわちバージョンで動作することを.. crossbrowserの背景を達成するCSSの方法を認識していないです。

は、しかし、このように、そこにいくつかのjQueryのプラグインがあります。

http://srobbin.com/blog/jquery-plugins/jquery-backstretch/

出典

2011-08-16 17:48:52 Joonas

私は要件の異なるセット、両方が有効である与えられ、再びこの質問に答えることにしました。ただし、この場合は具体的に対処します画像の下部を切り取ってください。

DEMO：http://wecodesign.com/demos/stackoverflow-7082174.htm

<style type="text/css"> 
#background { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: -1;  
} 
#contentContainer { 
    position: relative; 
    width: 500px; 
    height: 500px; 
} 
#theContent { 
    /* this is all pretty much just to make it look good, nothing important in here */ 
    position: absolute; 
    top: 200px; 
    left: 200px; 
    background: #FFF; 
    width: 80px; 
    height: 80px; 
    opacity: 0.7; 
    border-radius: 6px; 
    padding: 10px; 
} 
</style> 

<div id="contentContainer"> 
    <img id="background" src="stackoverflow-7082174.jpg" alt="Pretty Background" /> 
    <div id="theContent">This is the content</div> 
</div>

出典

2011-08-16 18:13:28

私は、社会生活からコードを剥がし、私はここでそれを置けば、それは便利だろうと思った：

<div id="landing-page-container"> 
    <div id="background-container"> 
    <div> 
     <img alt="background" id="background" src="files/background.jpg"> 

    </div> 
    </div> 

</div> 
<div class="container"></div>

、ここではあなたのCSSです：

html {width: 100%; height: 100%} 
body {width: 100%; height: 100%} 
body, #landing-page-container {width: 100%; height: 100%; background-color: black; z-index: 1} 
#background-container {width: 100%; height: 100%; position: absolute} 
#background {width: 100%; height: auto; z-index: -100}

もちろん、 background.jpg

出典

2011-12-27 20:46:21 iMad

CSSで大きな背景画像を表示するにはどうすればよいですか

答えて

関連する問題