CSS3 Background Images (Sizing & Multiple Imgs)

Posted on January 13th, 2009 by Zen Elements 3 Comments

Background images / textures are being used and implemented in many ways, often adding the nicest of finishing touches to a website. It is now proposed that in CSS 3, we can apply background image dimensions as well as use multiple background images. Along with the +/- quick list of compatible browsers, here is how…

The CSS3 background-size is written background-size: Apx Bpx;

- Apx = x-axis (width)
- Bpx = y-axis (height)

So now knowing this, we can start experimenting in the following ways…

Cross Brower Compatability

The browser that best supports the CSS3 background-size effect is Safari and Opera, which means we will concentraite on using the -o- and -webkit- prefix.

All articles in the CSS3 will be updated in light of future support & development.

Background-Size

This panel uses a standard 270 by 500 pixel image, downsized to 150 by 250 pixels:

CSS3 Background Image (Size)
#my_CSS3_id {
border: 5px solid #bd9ec4;
background:url(image_1.extention) bottom right no-repeat;
-o-background-size: 150px 250px;
-webkit-background-size: 150px 250px;
padding: 15px 25px;
height: inherit;
width: 590px;
}

Current Browser Support (Tested, Jan 2009)

FireFox (3.0.5)
Google Chrome (1.0.154.36)
Internet Explorer (IE6, IE7, IE8…)
Opera (9.6)
Safari (3.2.1, Windows)

An example for those on alternative browsers, not seeing the background-image effect..

To apply multiple background images in CSS3, we use a comma, e.g.

background: url(image_1.extention) top right no-repeat, url(image_2.extention) bottom right no-repeat;

So we can now experiment arranging a few different images in one line of code…

Multiple Background Images

This panel uses three seperate images in its background:

CSS3 Background Image (Multiple)
#my_CSS3_id {
border: 5px solid #9e9aab;
background:url(image_1.extention) top left no-repeat,
url(image_2.extention) bottom left no-repeat,
url(image_3.extention) bottom right no-repeat;
padding: 15px 25px;
height: inherit;
width: 590px;
}

Current Browser Support (Tested, Jan 2009)

FireFox (3.0.5)
Google Chrome (1.0.154.36)
Internet Explorer (IE6, IE7, IE8…)
Opera (9.6)
Safari (3.2.1, Windows)

An example for those on alternative browsers, not seeing the background-image effect..

Zen Elements Blog | CSS3 Series

So with these new CSS 3 background capabilities, I will be looking forward to see how they are used to create some nice background effects. Feel free to post any that you’ve seen in a comment below!

Also would like to give thanks to SummerAIR | Jen for her brushes which were borrowed for the background images in this CSS3 guide.

Thanks for reading,

Alex | Zen Elements

Comments (3)

Dale HayJanuary 15th, 2009 at 5:55 pm

Hopefully this becomes available in FF3 soon… (and also the other browsers) as this would make a lot of things easier for me to do instead of having to have two divs behind a div to make the effect of two backgrounds.

Reply – Quote

Zen ElementsJanuary 15th, 2009 at 8:17 pm

I agree that it would be a fantastically useful addition to the CSS arsenal.
I shall continue to badger the browsers into supporting it – among the other CSS 3 bits ‘n’ pieces – if you will!

Reply – Quote