demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Multiple Background Images In CSS3

css / backgrounds

Estimated reading time: 1 minute, 21 seconds

Screenshot of fixed-width design with gradients and multiple background imagesBackgrounds are not always perfectly tiled repetitions of images. Sometimes they are single images, such as the background image we used in the fixed-width example in the last entry.

After carefully cropping and optimizing the original source of that background image, we can make the result fairly small – around 15K as a JPEG or PNG-8. While this has been the traditional method, there are a few drawbacks:

  • If the background image is not tiled it tends to lead to fixed-width designs, in order to keep the image in place.
  • Much of the file size of the background image is wasted on whitespace.
  • It is impossible to position the individual components of the image via – you can move the image as a whole, but cannot change the spacing between individual components without re-editing the image in PhotoShop and re-exporting.

In CSS3 it is possible to set multiple backgrounds for elements, which means that each of these components could be clipped out as a separate image (using PhotoShop’s Slice tool or similar) and positioned independently. It is simply an extension of the existing background-image property:

div#container { background-color: #feffee; background-image: url(images/sigil_1.jpg), url(images/sigil_2.jpg), url(images/sigil_3.jpg); background-repeat: no-repeat; background-position: 2em 2em, right 100px, 12em 10em; };

Note that the images and their positions are listed in order, separated by commas. Also note that images can overlap each other. This now makes it possible to move the background images separately, and, if you wish, make the design fluid once more.

Further Resources

.net magazine has a good tutorial on multiple background images.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.