Your Customers are Mobile, you will be too …

As designers we sometimes come across situations in which we want to put a background in that consist mainly of a texture or a gradient with another image element or two that doesn’t repeat. Too often I see websites where this is done using either a large image larger than the common screen resolutions OR they repeat the background texture gradient and then place a div to hold the other image.

With the large image method this is an unnecessary use of bandwidth. It can be done better by having the background texture repeating as in the second method and using a second image (which we can use as you will see below)

With the second method the draw back to it is it can throw out a layout on different size screens particularly if you not careful. Even if you are careful this is still the long way to go round it and more time consuming than it should be.

Defining a second background image is easy in CSS.

background-image: url(images/page_gl.png), url(images/bottom_texture.jpg);

This will place 2 images in your background. Thing is it will only stick each image in once and that’s it. Also bare in mind that the LAST image in the queue will appear on the bottom then the second last etc etc. And yes you can queue as many images as you like.

To get them to site where you want you still need to define things like background-repeat and background-position. These are done in the same way as the background image declaration. Remember to do them in the same order in which you placed the images above.

background-repeat: no-repeat, repeat ;

This line of code for example will make the first image display just the once and the bottom image to repeat in both directions. Like the image to the right.

Background-repeat, background-position, background-clip, background-origin and back ground-size will accept multiple entries in the above manner separated by commas to help you handle the multiple images. Background-attachment will also accept these strings but not really advisable, either set it to scroll or set it to fixed.

We may also put background gradients in the background-image list. For Example:

background-image: url(images/page_gl.png), -moz-linear-gradient(#333, #999);
background-repeat: no-repeat, no-repeat ;

This would leave you with the picture to the right. Notice the no-repeat property I attached to the gradient. If you try to repeat it it won’t work.

Important Notes to Remember:

  • Do not repeat gradients
  • Last image goes to the bottom of the stack and works back to the first image listed.

Hope you all find this helpful.

4 Responses to Multiple Background Images CSS

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: