CSS two background images using a sprite

问题

I'm new to sprites and this particular task is boggling me - please help someone.

I currently use two background images like so:

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;
}

In order to improve page load time I'd now like to use one image, a sprite. I think this is unique in that I'd like to use the same image twice on the background, where I show one part of the image in the top right and one part of the image in the bottom left of the browser window. Both parts of the image I'd like to show are 600px wide by 400px tall.

If the new image is 1720px wide by 1100px tall and called "background.jpg" how would I adjust the code to achieve this?

回答1:

You could, instead, create two divs within the body:
Not as simple as CSS only, but it allows you to use your sprites.

The HTML:

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

The 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;
}

回答2:

Here's the answer for you with a working example.

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;
}

You can refer the below links for more info.
Css3.info
Css-Tricks
This is the method that I came across. There might be better methods to handle this.

来源：https://stackoverflow.com/questions/10364643/css-two-background-images-using-a-sprite

标签

css

css3

background-image

css-sprites