CSS Background Image Sprite, Using a sprite for body background image. Options

[Dante Monaldo]

I am really familiar with CSS sprites and I planned on using one for my site background, but I have run into some problems.

I know that, usually, you use the background-position property to set where the sprite starts, and then set the div width and height. Any part of the image that is not within the div width and height will not be visible.

But what if you only want to use one div, or body tag for example? Is there a way to determine where the sprite ends for certain sections, along with overlapping and repeating of certain sections of the sprite? This is a fairly complicated idea, but is this even possible? I would rather spend a lot of time on the CSS than add more divs.

This is what I have right now. It's in order from top to bottom (header background, repeating content background, footer background). See the two links below.

CODE

    background: url(../uploads/bg.png) center top no-repeat, url(../uploads/bg-body.png) center bottom no-repeat, url(../uploads/bg-body.png) center top repeat-y;
    background-size: 1210px 600px, 1210px 60px, 1210px 60px;
    background-color: #191919;
    min-width: 1000px;

http://goo.gl/Pzgdi

http://goo.gl/emmYh

Any ideas? I would really appreciate some insight, if this is even possible at all...

[Frederiek]

Css sprites are not used for multiple backgrounds on one element. For an explanation on CSS sprites, see http://css-tricks.com/css-sprites/

What you seem to be looking for is "CSS3 multiple backgrounds". See http://www.css3.info/preview/multiple-backgrounds/ or search on the web.

They are used in different ways.
And I wonder if in your case it's a good idea at all.

[Dante Monaldo]

That's what I had initially used before. But I wanted to see if it was possible with a sprite, mainly for loading speed purposes.

It also just seems cleaner and more efficient to have all the background images in one sprite.

Is there any way to use CSS3 multiple background images all from one sprite?

[Christian J]

Is there any way to use CSS3 multiple background images all from one sprite?

You'd need a way to crop the unused parts.

[Dante Monaldo]

Yes, I know. That's what I'm asking.

Is there a way to crop the background image sprite to display only the parts that you want, all within the body tag and without adding new HTML elements?

See my site: http://goo.gl/emmYh

And background image explanation: http://goo.gl/Pzgdi

[Christian J]

This page http://nicolasgallagher.com/css-background-image-hacks/ suggests using the :before and :after pseudo-elements to generate two cropped BG images. EDIT: this can also be done with the HTML element, giving you four images in total, but my version of Chrome doesn't support it.

Maybe CSS3 border-images can be used as well, especially those meant for corners (since the parts of the image overflowing the border-width can apparently be cropped), but I haven't been able to make it work yet.

This post has been edited by Christian J: May 14 2012, 09:22 AM

[Christian J]

Another idea is to use a (solid color) image placed in multiple positions so that it covers parts of the sprite.

Yet another idea is to use a very wide sprite, with so much distance between each picture on it that two such pictures are never visible at the same time on a normal-sized computer screen.

[Dante Monaldo]

I liked the idea to create a very wide sprite, but I thought it would defeat the purpose of why I'm using a sprite, which is to reduce load time.

So I'm going the http://nicolasgallagher.com/css-background-image-hacks/ route with pseudo-elements. I'm just having some more trouble.

I narrowed it down so now I get a clean header image, but how would I do the repeating body and ending footer? In the tutorial, it uses actions to control the position of the sprite, but I want to be able to have the background images overlay each other automatically, or just end after one another. Without a user needing to click or hover.

http://goo.gl/emmYh

[Christian J]

I had something like this in mind (note that you need both width and height):

CODE

body:before {
    content:"";
    position: absolute;
    top: 100px;
    left: 100px;
    width: 16px;
    height:16px;
    background:url(dog.jpg) top left;
}

body:after {
    content:"";
    position: absolute;
    bottom: 100px;
    right: 100px;
    width: 16px;
    height:16px;
    background:url(dog.jpg) center;
}

This post has been edited by Christian J: May 20 2012, 08:45 PM

[Dante Monaldo]

Several interesting hours later I get this: http://goo.gl/emmYh

I successfully used the :before and :after pseudo-elements for the header and footer background image sprite.

The only problem is that since there are only two pseudo-elements to insert content, I can't use the small strip of gray content in the sprite (in between the header and footer parts of sprite) to be repeated behind both pseudo-elements. I also can't use the sprite as the body background behind the pseudo-elements because then I get the whole sprite with the header and footer parts as well.

What I'm asking is, is there a way to do this without creating a separate image of just the body part of the background?

[Christian J]

OK here's a third one:

CODE

html {
    color: #000;
    background: #fff;
}

body {
    position: absolute;
    top: 100px;
    left: 100px;
    width: 16px;
    height: 16px;
    background:url(dog.jpg) bottom right;
}

body:before {
    content:"";
    position: absolute;
    top: 100px;
    left: 100px;
    width: 16px;
    height:16px;
    background:url(dog.jpg) top left;
}

body:after {
    content:"";
    position: absolute;
    bottom: 100px;
    right: 100px;
    width: 16px;
    height:16px;
    background:url(dog.jpg) center;
}

The BG color of the HTML element seems required to stop the BG image of BODY from overflowing, compare http://www.w3.org/TR/css3-background/#special-backgrounds (but the ordinary page content is supposed to overflow the small BODY).

The top and left offset of BODY seem required to make the generated content appear inside the viewport. Don't know why.

Probably all this is pretty fragile.

[Dante Monaldo]

You're right. Just a couple more things.

The body part of the background image that needs to be repeated I figure is not possible. It is 10px high and is behind the :before pseudo-element, but since the sprite is vertical, when I use repeat-y, it repeats the whole sprite because I can't crop the rest out. If I used the sprite horizontal, it would be possible, but that begins to defeat the purpose of using a sprite. If you do know of a way to do this, that would be great, but everywhere I look people say it's simply not possible.

Another problem is that since I have to use the top attribute versus the bottom attribute for the :after pseudo-element, the sprite is at the very bottom of the page. I use "top: auto" but then I can't get the footer background under the footer and copyright text. It shows up below the copyright. Is there a way to use "top: auto" and move it up a little (just a couple pixels) so it can be behind the copyright text?

[Christian J]

The body part of the background image that needs to be repeated I figure is not possible. It is 10px high and is behind the :before pseudo-element, but since the sprite is vertical, when I use repeat-y, it repeats the whole sprite because I can't crop the rest out. If I used the sprite horizontal, it would be possible, but that begins to defeat the purpose of using a sprite. If you do know of a way to do this, that would be great, but everywhere I look people say it's simply not possible.

Afraid I didn't understand that part. I haven't looked too close at your test page since there's too much content on it (try making a minimal test page instead), so I have no idea how you want to use the sprite in practice.

Another problem is that since I have to use the top attribute versus the bottom attribute for the :after pseudo-element, the sprite is at the very bottom of the page.

Only if you use the value zero for top/bottom.

I use "top: auto" but then I can't get the footer background under the footer and copyright text. It shows up below the copyright. Is there a way to use "top: auto" and move it up a little (just a couple pixels) so it can be behind the copyright text?

You might use a negative top margin value.

[Dante Monaldo]

Well what I'm trying to do is repeat the small 10px section of the sprite that is bland and without any other graphics (see this image [it is section labeled repeating body content]: http://goo.gl/Pzgdi). I want this to be repeated and centered behind everything to provide a solid background behind the content. But it seems like I won't be able to repeat a sprite. That is my question; can I repeat the sprite as the body background? Is there something I missed to repeat a background sprite?

This post has been edited by Dante Monaldo: Jun 8 2012, 07:27 PM

[Christian J]

Why not use CSS colors for the bland background?

I don't think you can repeat a sprite (=part of a BG image), unless you create a separate HTML element for each repetition.

[Christian J]

Actually you might stack multiple BG images in front of each other, each one with a small offset from the one behind:

CODE

body {
    background:
    url(dog.jpg) 0 -650px,
    url(dog.jpg) 0 -630px,
    url(dog.jpg) 0 -620px,
    url(dog.jpg) 0 -610px,
    url(dog.jpg) 0 -600px,
    url(dog.jpg) 0 -590px;
    background-repeat: no-repeat;
}

Add more BG images until the last/bottom/front-most one stays out of view in even the tallest browser window.

[jackso]

ul {
list-style-type:none;
}

ul li {
background:url(images/list-image.gif) no-repeat;
height:24px;
}

ul li.comment {
background-position: 0 -24px;
/*Override properties here if you wish */
}

And the html

<ul>
<li class="comment">Test</li>
</ul>