SitePoint.com

Paul O'B · Nov 7, 2009, 15:19

Hi,

The background position property places the whole image at the co-ordinates you specify.

If you said "background-position:0 151px" then the top left corner of the image would be placed at 151pixels from the left of your element.

This is clearly not what you want.

Imagine that your element with which you have applied width and height to is a window that you are looking through. Now imagine someone standing outside the window holding up a large picture that is bigger than the window so that you can only see the top left of the picture.

If you want to see what is on the right of the picture you would ask the person outside to move to the left thus bringing the right side of the picture into view. Therefore to move to the part of the image you want to see you need negative co-ordinates to drag the picture into view.

background-position:0 -151px

That means the man walks 151px to the left and now the new image is sitting right in front of your window.

If your sprites are stacked vertically then you would need to drag the image upwards and in my example I set all images at 20px height intervals (just look at the sprite I made) and therefore to see a sprite I drag the image upwards by 20px to see the first image. To see the second image I drag it up by -40px.

I kept the spacing even to make it easy but the image sizes were varied but all smaller than 20px. However the element in which they were viewed was sized to fit and thus only showed the image I wanted.

To make it easier to understand just cut out a square frame and stick it on an image that is much bigger than the frame. To see a different part of the image you need to move the image behind the frame backwards and forwards and up and down because the frame is immovable just like a window.

Quote:

.icon{display:inline-block;
background:url(images/iconset.gif) no-repeat 0 0;
padding:0 5px 0 0;}

That sets common styles for all the icons on one go to save having to repeat it multiple times. All we then need to do is to modify the background-position with an additional class for each icon and supply appropriate dimensions. This is a lot shorter than supplying the whole background property and url again and again and again. It save hundreds of bytes of code and is more flexible to boot

Lindaro · Nov 7, 2009, 16:23

Paul,

Thanks for the really great analogy !

I changed the code to
body{
background-position:0 0px;width:150px;height:250px;background:url(/a.jpg) repeat fixed;font-family:arial;font-size:1.1em;margin:0;padding:1.5em 2em}

The second portion (for the header)
div.header{background-position:0 -151px;width:100px;height:200px; display:block;margin-left:auto; margin-right:auto;}

Ryan, Thanks for catching the missing px.

I studied your code. It appears to contains the same problem you said of my code; you referenced the address of the code one time and then in ico1 and ico2 you didn't reference any address, yet used background-position in both you ico1 and ico2.

Are you saying my header css code should be
div.header{background:url(/a.jpg);background-position:0 -151px;width:100px;height:200px; display:block;margin-left:auto; margin-right:auto;}

Are .image and .ico functions and not just appropiate names?

Thanks for the help,

Linda

ralph.m · Nov 7, 2009, 17:17

Quote:

Originally Posted by Lindaro

Paul,
Thanks for the really great analogy !

Yes, it was very nice.

Quote:

I changed the code to
body{
background-position:0 0px;width:150px;height:250px;background:url(/a.jpg) repeat fixed;font-family:arial;font-size:1.1em;margin:0;padding:1.5em 2em}

You may run into problems here by trying to place a section of a sprite on the <body> element. Your rule above says that the body area is limited to 150 x 250px, which I doubt you want (as that's a pretty small website!). I would use a separate image for the body element.

Quote:

Are .image and .ico functions and not just appropiate names?

They are simply classes on elements that allow CSS to target them specifically.

Lindaro · Nov 7, 2009, 19:07

Ralph,
Here are the actual dimensions, those were just simplistic, sample dimensions.

body{
background-position:0 0px;width:-116px;height:122px;background:url(/a.jpg) repeat fixed;font-family:arial;font-size:1.1em;margin:0;padding:1.5em 2em}

For the css for the header:
div.header{background-position:0 -117px;width:808px;height:114px; display:block;margin-left:auto; margin-right:auto;}

Should I add "background:url(/a.jpg)" to the css for the header?
If so, since .ico amd .image are merely names and not functions, I don't understand why only 1 of these three pieces of code needs the url:

.image {
background:url(image.jpg); /*image is 200px wide, by 300px*/
}
.ico{background-position:0 0;
height:150px;
width:200px;
}
.ico2{background-position:0 150px;
height:150px;
width:200px;
}

Why are ico1 and ico2 useful even though they don't have a url ?

Thanks,

Linda

ralph.m · Nov 7, 2009, 19:36

What I meant was that you are asking for trouble using a sprite on the <body> element, as you are saying that this image will be the background for your entire content, which is set at height:122px. I'm sure you don't want a site that is only 122px in height.

Code:

body{
background-position:0 0px;width:-116px;height:122px;background:url(/a.jpg) repeat fixed;font-family:arial;font-size:1.1em;margin:0;padding:1.5em 2em}

Quote:

since .ico amd .image are merely names and not functions, I don't understand why only 1 of these three pieces of code needs the url...

Each element that will have a sprite background will have a class called "image", hence the following style:

Code:

.image {
background:url(image.jpg); /*image is 200px wide, by 300px*/
}

But you don't want the same image position on each element, so an extra, unique class is added to each element to set the background position just for that element. Hence rules like

Code:

.ico{background-position:0 0;
height:150px;
width:200px;
}

As Paul said, you don't have to write your CSS this way, but it's much more efficient.

So, for example, your header HTML would look like this:

Code:

<div class="header image">
.
.
</div>

and the CSS like this:

Code:

.header {
  background-position: 0 -117px;
  width:808px;
  height:114px; 
  display:block;
  margin-left:auto; 
  margin-right:auto;
}

.image {
background:url(/a.jpg); /*image is 200px wide, by 300px*/
}

The code above is not ideal, though, as you say that the sprite image is only 200 x 300px, but the header is 800px wide. So some of the header won't have any background image. If I were you, I'd use sprites just for little images, and use a separate background image for big areas like the header.

Lindaro · Nov 7, 2009, 20:23

Ralph,

The background image is 116 by 122. It's repeated in the body tag. The header image is 808 by 114. I plan on having the two combined into one image, the left being the wil-be repeated image for the background (116x122), and the right is the header (808x114). There's no 200 by 300 image, that was just a simpistic example.

On "I'm sure you don't want a site that is only 122px in height.", are you saying that I have the 122 and 116 in the body tag placed such that those dimensions determine the size of the webpage and not the size to be taken from the sprite image?

so maybe
body{
background-position:0 0px;width:-116px;height:122px;background:url(/a.jpg) repeat fixed;font-family:arial;font-size:1.1em;margin:0;padding:1.5em 2em}

should be
body{
background:url(/a.jpg); background-position:0 0px; width:-116px;height:122px; repeat fixed;font-family:arial; font-size:1.1em;margin:0;padding:1.5em 2em}

or are you saying referencing a sprite in a body tag may or will cause problems?

On "<div class="header image">", no kidding, I never saw a double or sub class usage in CSS. That clears things up some.

Thanks for your patience Ralph,

Linda

ralph.m · Nov 7, 2009, 21:52

Quote:

Originally Posted by Lindaro

The background image is 116 by 122. It's repeated in the body tag.

Yes, unfortunately that won't work with a sprite image, because the whole image will be repeated on the background, including the other section. Yu'll need to have a background image just for the <body> tag.

Quote:

On "I'm sure you don't want a site that is only 122px in height.", are you saying that I have the 122 and 116 in the body tag placed such that those dimensions determine the size of the webpage and not the size to be taken from the sprite image?

Well, they determine both, and that's the problem. The only way a sprite image can work is if the element is fixed in width and height to match the part of the sprite image is to appear... once. You can't have a repeated sprite image. With the setting you have, the image would only appear once, because there is no space for it to repeat anyway.

Quote:

or are you saying referencing a sprite in a body tag may or will cause problems?

Yes, it just won't work. You also can't have a negative width setting... unless maybe you are designing a site for a black hole...

You can have things like negative margins, which pull elements in various directions, and negative left, right, top and bottom settings, but as you can image, a negative width is altogether different.

Quote:

On "<div class="header image">", no kidding, I never saw a double or sub class usage in CSS. That clears things up some.

Yes, it's a useful feature of classes that you can have more than one on any element. You could have 3, 4, 5 etc, though that would probably be rather inefficient. They are all separated by a single space, like this:

class="one two three four"

Quote:

Thanks for your patience Ralph

No problem. I'm not sure I've really been very clear, but I hope I am helping. Sprites are handy, but seem not to be what you need in this instance.

Lindaro · Nov 7, 2009, 23:06

Ralph,
Well that's ironic. The pivot man for sprites is background-image, but sprites don't work for the background of your site (when the background is a repeated image).

It looks like the underlying enabling mechanism of sprites (or maybe css) doesn't include memory; I thought once I referenced a portion of a sprite it would effectively be copying the portion of the image and the repeat funtion would just paste the image over and over. It looks like there's some unhealthy connection or disconnection in sprites (or css). No copy and or no paste functionality seems very out of place in graphic work.

What a drag. The CSS authorities have to fix that.

I have one other possible use for sprites. That would be for the header and a little icon I use on many pages. Is it worth settig up a sprite to save only one http request?

Thanks Ralph,

Linda

ralph.m · Nov 7, 2009, 23:13

Linda, you were assuming too much about sprites. They are just a neat little trick worked out by some clever CSS person; they aren't part of some grand plan for CSS. A background image is just a background image, and if you have lots of small-ish ones you can combine them into one image and just show parts of that image in elements of defined width and height.

The only time I tend to use sprites is when I want a rollover effect. Then, on hover, the position of the image shifts so that you see another part of it.

If I had lots of icons on a page (like Google does) I would put them all in one sprite image as Google does. But for general background images, such as for a header, I would just use a normal background image... just like the CSS gods intended (so to speak!)

Stomme poes · Nov 8, 2009, 01:52

The penalty for loading images, especially if there aren't a hundred billion of them on a page (like some CSS sites I know) isn't nearly as bad as the penalty for having a bloated template with 13 separate stylesheets, or for having like 15 different javascripts running... sprites is just a nice thing to do when it makes sense to do.

I wouldn't include the body's bg image into the whole sprite thing. It's ok to have multiple images loaded for a page. Remember most user agents will cache those images-- a user going from your home page to another page who looks the same will not re-request the background image again either way. Sprites are best used on boxes who already have fixed pixel dimensions.

Now I've used sprites on things like menus, but there's a drawback there as well: I set height and width on the menu items, but that means if a user needs larger text, the sizes I set limit the text enlargement and cuts off the text. So while I saved the user some loading time, I may have also made my menu inaccessible to many people. It's often a trade-off.

In general if the body has a background image, it's its own image. This because you do not want to determine the size of the body with so many different screen sizes out there, as Ralph said.

Lindaro · Nov 8, 2009, 10:03

Ralph, Stomme,
From my experience, the faster you get your site to load, the more visitors. While it may be tedious to do a sprite for the header and some little icon found on most pages, if the page loads faster becuase of 1 less http request, why not? Maybe sprites don't work well in all browsers, "but there's a drawback there as well: I set height and width on the menu items, but that means if a user needs larger text, the sizes I set limit the text enlargement and cuts off the text." Are you saying sprites advesely affect the functionality of a browser? Good programming sets the height and width dimensions for images without using sprites.

Thanks,

Linda

Paul O'B · Nov 8, 2009, 10:38

Quote:

Are you saying sprites advesely affect the functionality of a browser?

Sprites have nothing to do with this - they are just a collection of images stored on one image.

How you apply these to your layout can affect the functionality but that is a coding issue and not a sprite issue.

If you apply the sprite to an element of set height and width then there is not problem. However if you apply the sprite as a background to some text content (such as a p element) then you run the risk of the user increasing the text and thus revealing another sprite in the image that you didn't want to show.

Therefore some people will clip the p element to the exact height of the sprite and thus running the risk of text being clipped if the text size is increased.

Sprites should not really be used in this way and they should be applied to specific elements (as in my original example) that contain only the sprite and not text content. The drawback is the extra element needed to do this but that's a small price to pay for the improved efficiency.

You can however allow for certain text expansion by placing the sprites further apart than their actual size and when text size is increased the other sprites don't come into view.

For repeating backgrounds that are applied to existing elements then sprites are not a good idea and its best to use individual images in those cases.

There is never one approach that is correct and you have to be flexible and apply the best routines for the task in hand.

Lindaro · Nov 8, 2009, 12:12

Thanks Paul, Everyone,
I have a much better understanding of sprites, consequently I'm sprited out. They're just not gonna work for me. Sprite offspring like to be individuals - they don't like to be cloned by css repeating. For the other two images on my site, I could use a sprite, but it doesn't look like sprites are good for header images either, that leaves me only one image and that image is used in a link, and sprites are troublesome for inline links also. That's three strikes. I done struck out on sprites.

Thanks again,

Linda

Stomme poes · Nov 9, 2009, 01:02

Here's an example of using one sprite for a menu (where the Original Poster on another forum had three base images and three hover images, and I took his design and made one single image from it): http://stommepoes.nl/Tests/lilbellas2.html

The header image *could* have been merged with the menu, but I just didn't bother.

On that page I link to the single image. There, it's a sprite. If someone needed to turn images off, or if they have no images, then there is text, but because I have set heights, eventually text-enlage will cut off the text. Granted, I tried to let it be able to take several text-enlarges, but eventually it just breaks. A trade-off the person making this site was willing to take.

Quote:

From my experience, the faster you get your site to load, the more visitors.

That's a generalisation, but obviously isn't a 1:1 thing. Plus, you don't have full control of how fast your site loads. First you're shackled to your server. If you have shared hosting, it matters how well the hosting provider set up the servers, how good is their load balancing, do other people getting hosted clog up your tubes with their visitors? How efficient was that server set up?

How fast is the user's connection?
How fast is their browser?
Are they connecting to you directly or through a filter or a proxy? Some proxies are fast and some are slow.

Are they home on dial-up, at university with high-speed, or in a wifi cafe with molasses speeds?

You don't know how many machines or at what speed the visitor is reaching you. I know of a few sites who always take a day and a half to load (perlmonks.org is pretty slow for me) and it ain't from too many images : )

Image optimisation is a nice thing to do along with all your other optimisation, but after doing what you can, you are then leaving your site out in the wild to fend for itself and there's only so much you can do.

For something like a menu or whatever, where you're using multiple little images, esp for rollovers and the such, changing 10 9kb images to a single 90kb image is a good thing to do, because you just reduced 10 requests to one.
However unless your visitors are tromping in the heart of the jungle with their ancient machinery using satellite hookup and can only DL 24kbs, you don't need to consider optimisation as the be-all end-all of site design.

Nov 7, 2009, 19:07	#29
Lindaro SitePoint Enthusiast Join Date: Nov 2009 Posts: 42	Ralph, Here are the actual dimensions, those were just simplistic, sample dimensions. body{ background-position:0 0px;width:-116px;height:122px;background:url(/a.jpg) repeat fixed;font-family:arial;font-size:1.1em;margin:0;padding:1.5em 2em} For the css for the header: div.header{background-position:0 -117px;width:808px;height:114px; display:block;margin-left:auto; margin-right:auto;} Should I add "background:url(/a.jpg)" to the css for the header? If so, since .ico amd .image are merely names and not functions, I don't understand why only 1 of these three pieces of code needs the url: .image { background:url(image.jpg); /image is 200px wide, by 300px/ } .ico{background-position:0 0; height:150px; width:200px; } .ico2{background-position:0 150px; height:150px; width:200px; } Why are ico1 and ico2 useful even though they don't have a url ? Thanks, Linda Last edited by Lindaro; Nov 7, 2009 at 19:12. Reason: spellig

Nov 7, 2009, 20:23	#31
Lindaro SitePoint Enthusiast Join Date: Nov 2009 Posts: 42	Ralph, The background image is 116 by 122. It's repeated in the body tag. The header image is 808 by 114. I plan on having the two combined into one image, the left being the wil-be repeated image for the background (116x122), and the right is the header (808x114). There's no 200 by 300 image, that was just a simpistic example. On "I'm sure you don't want a site that is only 122px in height.", are you saying that I have the 122 and 116 in the body tag placed such that those dimensions determine the size of the webpage and not the size to be taken from the sprite image? so maybe body{ background-position:0 0px;width:-116px;height:122px;background:url(/a.jpg) repeat fixed;font-family:arial;font-size:1.1em;margin:0;padding:1.5em 2em} should be body{ background:url(/a.jpg); background-position:0 0px; width:-116px;height:122px; repeat fixed;font-family:arial; font-size:1.1em;margin:0;padding:1.5em 2em} or are you saying referencing a sprite in a body tag may or will cause problems? On "<div class="header image">", no kidding, I never saw a double or sub class usage in CSS. That clears things up some. Thanks for your patience Ralph, Linda Last edited by Lindaro; Nov 7, 2009 at 20:28. Reason: Clarify

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Nov 7, 2009, 16:23	#27
Lindaro SitePoint Enthusiast Join Date: Nov 2009 Posts: 42	Paul, Thanks for the really great analogy ! I changed the code to body{ background-position:0 0px;width:150px;height:250px;background:url(/a.jpg) repeat fixed;font-family:arial;font-size:1.1em;margin:0;padding:1.5em 2em} The second portion (for the header) div.header{background-position:0 -151px;width:100px;height:200px; display:block;margin-left:auto; margin-right:auto;} Ryan, Thanks for catching the missing px. I studied your code. It appears to contains the same problem you said of my code; you referenced the address of the code one time and then in ico1 and ico2 you didn't reference any address, yet used background-position in both you ico1 and ico2. Are you saying my header css code should be div.header{background:url(/a.jpg);background-position:0 -151px;width:100px;height:200px; display:block;margin-left:auto; margin-right:auto;} Are .image and .ico functions and not just appropiate names? Thanks for the help, Linda

Nov 7, 2009, 23:06	#33
Lindaro SitePoint Enthusiast Join Date: Nov 2009 Posts: 42	Ralph, Well that's ironic. The pivot man for sprites is background-image, but sprites don't work for the background of your site (when the background is a repeated image). It looks like the underlying enabling mechanism of sprites (or maybe css) doesn't include memory; I thought once I referenced a portion of a sprite it would effectively be copying the portion of the image and the repeat funtion would just paste the image over and over. It looks like there's some unhealthy connection or disconnection in sprites (or css). No copy and or no paste functionality seems very out of place in graphic work. What a drag. The CSS authorities have to fix that. I have one other possible use for sprites. That would be for the header and a little icon I use on many pages. Is it worth settig up a sprite to save only one http request? Thanks Ralph, Linda

Nov 7, 2009, 23:13	#34
ralph.m Aiming for best practice Join Date: Mar 2009 Location: Melbourne, Australia Posts: 1,035	Linda, you were assuming too much about sprites. They are just a neat little trick worked out by some clever CSS person; they aren't part of some grand plan for CSS. A background image is just a background image, and if you have lots of small-ish ones you can combine them into one image and just show parts of that image in elements of defined width and height. The only time I tend to use sprites is when I want a rollover effect. Then, on hover, the position of the image shifts so that you see another part of it. If I had lots of icons on a page (like Google does) I would put them all in one sprite image as Google does. But for general background images, such as for a header, I would just use a normal background image... just like the CSS gods intended (so to speak!)

Nov 8, 2009, 01:52	#35
Stomme poes Site Point Member Join Date: Aug 2007 Location: Netherlands Posts: 2,676	The penalty for loading images, especially if there aren't a hundred billion of them on a page (like some CSS sites I know) isn't nearly as bad as the penalty for having a bloated template with 13 separate stylesheets, or for having like 15 different javascripts running... sprites is just a nice thing to do when it makes sense to do. I wouldn't include the body's bg image into the whole sprite thing. It's ok to have multiple images loaded for a page. Remember most user agents will cache those images-- a user going from your home page to another page who looks the same will not re-request the background image again either way. Sprites are best used on boxes who already have fixed pixel dimensions. Now I've used sprites on things like menus, but there's a drawback there as well: I set height and width on the menu items, but that means if a user needs larger text, the sizes I set limit the text enlargement and cuts off the text. So while I saved the user some loading time, I may have also made my menu inaccessible to many people. It's often a trade-off. In general if the body has a background image, it's its own image. This because you do not want to determine the size of the body with so many different screen sizes out there, as Ralph said.

Nov 8, 2009, 10:03	#36
Lindaro SitePoint Enthusiast Join Date: Nov 2009 Posts: 42	Ralph, Stomme, From my experience, the faster you get your site to load, the more visitors. While it may be tedious to do a sprite for the header and some little icon found on most pages, if the page loads faster becuase of 1 less http request, why not? Maybe sprites don't work well in all browsers, "but there's a drawback there as well: I set height and width on the menu items, but that means if a user needs larger text, the sizes I set limit the text enlargement and cuts off the text." Are you saying sprites advesely affect the functionality of a browser? Good programming sets the height and width dimensions for images without using sprites. Thanks, Linda

Nov 8, 2009, 12:12	#38
Lindaro SitePoint Enthusiast Join Date: Nov 2009 Posts: 42	Thanks Paul, Everyone, I have a much better understanding of sprites, consequently I'm sprited out. They're just not gonna work for me. Sprite offspring like to be individuals - they don't like to be cloned by css repeating. For the other two images on my site, I could use a sprite, but it doesn't look like sprites are good for header images either, that leaves me only one image and that image is used in a link, and sprites are troublesome for inline links also. That's three strikes. I done struck out on sprites. Thanks again, Linda