Background sprites, with repeat?

HTML & CSS
1

Hi,

I’m just having a play around with CSS sprites for our backgrounds (we have 6 main images as backgrounds, so I’m trying to merge them all into one)

I’ve got the following:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 31</title>
<style>
body{
	background:url(http://carmstatic.com/images/bg-sprites.png) top center;
	background-position: 0px 0px;
	background-repeat: repeat-y;
	width:4px;
	height:4px;
	text-align:center;
}
</style>

</head>

<body>

</body>

</html>

This doersn’t seem to work right (the “body” should just show the 4x4px image at the top left of the image)

Can anyone point me in the right direction? Scratching my head here, as doesn’t seem to work :frowning:

Cheers

Andy

2

If you set the width and height of the body element to 4px then you are going to have possible the smallest site in the world.

You can’t really use a sprite on the body element because all the other images in the sprite will be displayed. Sprites are usually used on smaller elements that are either a fixed height and width or aren’t going to grow much so that you can move each sprite out of the way when you make the image.

Sprites are usually good for multiple little icons and things like that but no good if you want to repeat something across or down a fluid height content element.

3

Hi,

Thanks for the reply. Ok, that makes sense =) I’ll just do it with some of the header images (which are not repeated), and that should at least remove 3 or 4 seperate images, and put them into one)

Cheers

Andy

4

MMm ok - just trying this on the header bar:

The image is 949 (but the header block is a little bigger) … now, If I just do this with the #header, it works fine (as it repeats);

#header{ 
  background:url(http://carmstatic.com/images/header-bg.gif);
}

…but this doesn’t seem to work:

.bg_sprites {
	background:url(http://carmstatic.com/images/bg-sprites.png);
}
.sprite-bg-header-bg { background-position: -206px 0; width: 949px; height: 124px; 	background-repeat: repeat-x; } 

               <div id="header" class="bg_sprites sprite-bg-header-bg" >
                   other div content stuff here..
               </div>

Any suggestions?

TIA!

Andy

5

Hi,

You can’t repeat a section of a sprite if there are other sprites to the side of it because it’s the whole image that gets repeated.

If you want to repeat horizontally then you stack your sprites in the image vertically so that only the one sprite you want repeated is in the same horizontal row.

The same applies to vertical repeats and then you would stack the sprites horizontally.

You need various sprites for the various effects.

Have a look at some sprite generators which should five you the general idea.

6

Hi,

Thanks - still doesn’t wanna work though :frowning:

The image is (generated from the first link on the google results, which is what I was using before):

http://carmstatic.com/images/bg-sprites.png

…and the CSS:

<style>
.bg_sprites {
	background: url(http://carmstatic.com/images/bg-sprites.png) no-repeat top left;
}
.sprite-bg-header-bg { background-position: 0 -320px; width: 949px; height: 124px; background-repeat: repeat-x; }
</style>

Any ideas?

TIA (your time is much appreciated :))

Andy

7

You have the width set too short in that rule. Just remove the width:)

8

haha duh! Thanks for pointing that out - not sure how I missed that :stuck_out_tongue:

Thanks for all your help - much appreciated :slight_smile:

Cheers

Andy