Using same background CSS image with multiple elements resource intensive?

Is using the same background image with multiple css elements resource intensive?

I though since its the same image (1px wide being repeated over x), it should not matter weather im using it with 1 element or 10. Once the image loads it should not longer take time to apply this bg image if it is used on multiple elements.
e.g.

.style1{
background: #111111 url('bgimage.gif') repeat-x top;
}

.style2{
background: #222222 url('bgimage.gif') repeat-x top;
}

.style3{
background: #333333 url('bgimage.gif') repeat-x top;
}

...

Code (markup):

Is that correct?

 

In terms of memory use and bandwidth -- no, it doesn't consume any extra.

 

Thanks!
You say "in terms of memory use and bandwith", but is there something else outside of those 2 that it will affect (e.g. Time to display on user screen)?

 

Well, apart from the render time any image backgrounds are going to take, not really. The laugh is that using image files might take more bandwidth, but often renders faster and uses less power (a concern if designing for mobile) than CSS3 gradients do -- particularly if you have hover states over those backgrounds.

On the whole when possible it's best to use a single image -- it's ALWAYS more efficient -- an entire aspect of site optimization, the incorrectly named "CSS Sprites" is built around combining down common images to a single file and sliding their background-position around to take advantage of the fact that if you call the same image more than once it's still only downloaded once.

Every time you make a file request for one not already in your cache there has to be a 'handshake' -- the UA (user agent -- typically a browser) asks the server "do you have this file", the server goes "yeah, here's the info on it" -- if it's been updated since it was last cached or isn't in the cache the UA then says "great! Send it to me!"

Each of those 'handshakes' of 'hi, how you doing', 'fine thanks and you?" takes basically the same amount of time as a 'ping' would -- so if your ping time to the server is 200ms, you're looking at 600ms. Because UA can request multiple files at once, there's some overlap so the 'real world' average people use is 200ms total per separate file on your page 'best case', and up to a full on second 'worst case'. To get the 'average handshaking time' for a site, you subtract 7 from the number of separate files the page uses, multiply by those 'best case' and 'worst case' numbers to get your time.

So if you have a page that's built from 12 separate files, the handshaking overhead on "first load" -- aka the first time someone visits the site -- would 'real world guesstimate' take anywhere from 1 second to 5 seconds of handshaking... entirely acceptable. If you had a page built from 87 separate files, that 'real world' is anywhere from 16 to 80 seconds handshaking... Not acceptable and more likely to piss off visitors to the point they'll just go somewhere else.

Which is why when possible, use one file instead of many separate ones... and in your example the UA (browser) is smart enough not to redownload the same file over and over again just because you call it more than once.

This is a lesson lost on the idiots out there who slap dozens of separate script files into their markup or split their CSS into a slew of separate files for no good reason, often without even having media targets on them or using the halfwit "all" property.