CSSスプライトを使用した2つの背景画像

私はスプライトを初めて使用しています。この特定のタスクは私を不安にさせています。私は今、一つの画像、スプライトを使用したいページの読み込み時間を改善するためにCSSスプライトを使用した2つの背景画像

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

：

は、私は現在のようなので、2枚の背景画像を使用します。私はこれがバックグラウンドで同じ画像を2回使用したいと思っている点で独特です。ブラウザウィンドウの左下に画像の右上と左下に画像の一部を表示します。表示したい画像の両方の部分は、幅600ピクセル、高さ400ピクセルです。

新しい画像の幅が1720pxで、高さが1100pxで「background.jpg」と呼ばれる場合、これを達成するためにコードを調整するにはどうすればよいですか？

出典

2012-04-28 Doug Fir

重複した投稿： - http://www.stackoverflow.com/questions/7653240/multiple-background-images-using-css3-and-sprites – rgvcorley

私の下の回答が役に立ちましたか？応答なし？ – Katti

あなたは、代わりに、body内の2つのdivsを作成することができます。
のみCSSなどとして単純ではない、それはあなたがあなたのスプライトを使用することができます。

HTML：

<body> 
    <div id="bgOne"></div> 
    <div id="bgTwo"></div> 
</body>

CSS：

body { 
    min-width: 1150px; 
} 

#bgOne, #bgTwo { 
    position: fixed; 
    height: 400px; 
    width: 600px; 
} 

#bgOne { 
    background: url('images/bktopright.png') no-repeat right top; 
    right: 0; 
    top: 0; 
} 

#bgTwo { 
    background: url('images/bkbottomleft.png') no-repeat left bottom; 
    left: 0; 
    bottom: 0; 
}

出典

2012-05-23 22:26:44

ここでは実施例とのあなたのための答えです。

http://jsfiddle.net/ctLZY/

<div class="bg" id="bg1"></div> 
<div class="bg" id="bg2"></div>

CSS

.bg{ 
    background-image: url("someimage.png"); 
    background-repeat: no-repeat; 
    position:fixed; 
    width:100px; 
    height:100px; 
} 
#bg1{ 
    background-position: -50px 0px; 
    right:0px; top:0px; 
} 
#bg2{ 
    background-position: 50px 0px; 
    left:0px; bottom:0px; 
}

あなたはより多くの情報については、以下のリンクを参照することができます。
Css3.info
Css-Tricks
これは私が遭遇した方法です。これを処理するより良い方法があるかもしれません。

出典

2012-05-24 16:24:14 Katti

CSSスプライトを使用した2つの背景画像

答えて

関連する問題