CSS3 Background Images

Background images / textures are being used and implemented in many ways, often adding the nicest of finishing touches to a website. It is now in CSS3 we can apply background image dimensions as well as use multiple background images.

The CSS3 background-size is written background-size: Apx Bpx;
- Apx = x-axis (width)
- Bpx = y-axis (height)

Background Images

This panel is using 270 by 500 pixel image downsized to 100 by 200 pixels.
  1. CSS3 Background Image (Size)
  2. #my_CSS3_id {
  3. background:url(image_1.extention) bottom right no-repeat;
  4. background-size: 100px 200px;
  5. }

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

Multiple Background Images

Applying multiple background images in CSS3 is quite easy, using a comma with the standard background property.

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

This panel uses three seperate images in its background.
  1. CSS3 Background Image (Multiple)
  2. #my_CSS3_id {
  3. background: url(image_1.jpg) top left no-repeat,
     url(image_2.jpg) bottom left no-repeat,
     url(image_3.jpg) bottom right no-repeat;
  4. }

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

The Zen Elements CSS3 Series

Thank you for reading!
@zen