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 and also result in a longer download time.

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.

The image below makes a nice background for the top of a web page however it has clouds and blue sky on the bottom edge so this won't work.

cloud background 1

The image below is the same image as on the left but it has been cropped to remove the clouds on the bottom. This leaves a plain colored background on the bottom.

cloud background 2


Here is the same image placed in a longer box with the same image with a plain colored background the same color as the blue sky applied to the box. The background color was applied with a style tag.


cloud background 2


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




order a Seo Analysis Report

Lori Eldridge
Copyright © 3-18-2013 - updated 11-26-14
All Rights Reserved
Twitter     Google+     Facebook     linked in