CSS Sprite Full Page Background: background-position

Question

I have an image, the top 80px of which I want to use for some other purpose, and remaining image, I want to set as a full page background image.

I tried setting:

background-position: 0px -80px

but it does not work.

How to properly use css sprite (background position) and full page background image?

score 0 · Answer 1 · answered Feb 03 '12 at 03:40

Either of these (link or link) will generate a sprite for you and the corresponding css.

Once you have that completed use the css classes for their corresponding areas like:

.image1Background {
    background-image: url("thesprite.png"),
    left: -80px;
    top: 0px;
}

.image2Background {
    background-image: url("thesprite.png"),
    left: 0px;
    top: 0px;
}

<body class="image1Background">
    <div class="image2Background">
    </div>
</body>

Sprites are generally used for a lot of little icons to reduce the number of requests needed to download them to the client.

score -1 · Answer 2 · answered Feb 02 '12 at 10:21

-1

i would use a div for the 80px image and the background img as body background.. something like:

body { background-image: url(background.gif) }
#imgtop { height: 100%; width: 100%; background-image: url(80px_image.gif) }

answered Feb 02 '12 at 10:21

fzninuse

1
1

Hi.. My Basic objective is... to combine banner image and background image into one. I am not sure if your solution tries to achieve that. – workwise Feb 02 '12 at 10:22
into one div? or should it only looks like one image? – fzninuse Feb 02 '12 at 10:27
That's the exact opposite of an image-sprite, which OP is asking about. – Christofer Eliasson Feb 02 '12 at 21:45

CSS Sprite Full Page Background: background-position

2 Answers2