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.
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:
<img src="images/cloudbg1sml2.jpg" width="250" height="166" alt="clouds">
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.
Return to CSS TIPS
Copyright © 3-18-2013 - updated 7-9-17
All Rights Reserved