LWD logoLori's Web DesignLWD logo

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 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="width:250px;height:300px;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 the image is now separate from the background.


Also see How to Design a Semi-transparent Background Over Another Image


Return to CSS TIPS

Google


Lori Eldridge
Copyright © 3-18-2013 - updated 7-9-17
All Rights Reserved
Twitter     Google+     Facebook     linked in