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.
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.
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.
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 that the image is now separate from the background.
Return to CSS TIPS
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
Copyright © 3-18-2013 - updated 1-12-19
All Rights Reserved