How to use CSS to set up 2 Backgrounds on a Web Page

Setting up a web page with 1 large image for the background means all your pages will be the same height or you'll have to repeat the image down the page several times depending on the length of the page. It will also take up a lot of memory to use a large image and result in a longer download time (page speed is now a Google ranking factor).

A better method is to use 2 backgrounds. If you use a smaller image on the top with the rest of the page in a plain color it will enable the pages to be in varying lengths and also take less time for downloading.

This method can only be achieved if the image has one single color across the bottom, so the plain color of the background will blend in with the bottom of the image.

Here is the same image placed in a box that is longer than the image with a plain colored background the same color as the blue sky in the bottom of the image.
clouds

In order to get the right color for the background you'll need to use a graphics program that has a eyedropper or another tool that picks up the hex color number from the image. Use a width of 5x5 pixels for the eyedropper. The colors on the bottom of the image vary slightly from left to right so I took the color in the bottom middle which was #9BC8E7. If I hadn't done that then the background wouldn't match the image on either the left or right side. Use that color hex number and add it to a style tag for the box like this:

<div style="background:#9BC8E7;">
<img src="images/cloudbg1sml2.jpg" width="250" height="166" alt="clouds">
</div>


If your computer has drop and drag capability click on the image and drag it to see that the image is now separate from the background.


Another Example of 2 Backgrounds on one Page

The following example is of a photo that needed to be a bit longer in order for the overlaying text in a poem to not run off the background image when the page was reduced to a smaller size on mobile devices (see photo below).

This is a poem about the Twin Towers falling in NY on 2001. I finally found a dark image of the towers so the text of the poem would show up above the background image. I had to find an image about 800 pixels wide and long enough for the very long poem or the text would overflow the image.

However, even with this image there still wasn't enough background image for all the text so I aded a black background under the whole image and that fixed the problem.

I use "boxes" in specific widths that collapse on different media devices so all boxes collapse to about 300 pixels width on small cell phones. This eliminates having to set up specific media queries for different sized images. Here is the code used on this sample with 2 backgrounds:

<div class="box800 center" style="color:#ccc; background-color:#000; background-image: url(images/name-of-image-goes-here.jpg); background-repeat:no-repeat;"> </div>


Click here to see the image in full size and how the the original image collapses at different screen widths and the text stays within the boundary of the image.

image with 2 backgrounds


Return to CSS TIPS

Also see:
Design a Semi-transparent Background Over Another Image
Gradient Backgrounds with CSS
Design Gradient Backgrounds with Images
How to Design Textured Backgrounds with Images
Several Examples of Textured Images for Backgrounds

Lori Eldridge
Copyright © 3-18-2013 - updated 11-30-20
All Rights Reserved