2012-04-28 18 views
1

私は近いよ知っている誰かが私を助け:構文ヘルプ - 背景画像スプライトCSS

body { 
background-attachment: fixed; 
background: url("images/background.jpg"), url("images/background.jpg"); 
background-repeat: no-repeat; 
line-height: 1; 
min-width: 1150px; 
background-position: top left, bottom right; 
} 

スプライト、「background.jpg」として使用されている画像は、背の高い1100pxで1720px幅です。 2番目のインスタンスでは、イメージの最初のインスタンスの右上部分とイメージの左下の部分を表示する必要があります。いずれの場合も、jpgから取得する必要がある長方形のサイズは、幅600ピクセル、高さ400ピクセルです。

+0

これは、画像ファイル名がまったく別の場所や異なる背景位置にスワップアウトされた状態で、http://stackoverflow.com/questions/10364643/css-two-background-images-using-a-spriteの投稿のように思われます。 。 – BoltClock

+0

これはその投稿に関連していますが、イメージの目的の座標を選択するのに必要な特定の構文についての新しい質問です。 –

答えて

2

これは、画像の後の値を用いて約

body { 
    background-attachment: fixed; 
    background: url("images/background.jpg") 100% 0px no-repeat, url("images/background.jpg") 0% 600px no-repeat; 
    line-height: 1; 
    min-width: 1150px; 
    } 

プレイを助けるかもしれません。 100%と0%はx軸を表し(これらもpxでもかまいません)、0px 600pxはy軸を表します。このページでライブをすることなく、私はあなたに話すことができます。

+0

いいえ私は混乱に取り組んでいます。 URLの後の座標は、選択するイメージの部分またはイメージの選択された部分を配置する場所に関連していますか?私は画像の各セクションの左上と右下をどのように配置するかと、どこで選択するかということを混乱させています。簡単に言うと、各辺に1000pxの正方形があり、スプライトの左下から100pxの正方形を選択し、ブラウザの右上に配置するとします。どうやって?私は理にかなっていると願っています! –

+0

これを行うには、以下の背景が必要です。url( "images/background.jpg")900px -900px no-repeat座標は画像の位置に関係します。これは左から900px、上から-900pxです。それは理にかなっていますか? – frontendzzzguy

+0

また、座標は親コンテナを基準にしています。 – frontendzzzguy