Introduction
This is a rewrite of a page I wrote in 2003 explaining how to use images as backgrounds (Internet Archive) for web pages. Time moves on and HTML, CSS and JavaScript have changed quite a bit since those days.
Images can be used to fill a container or an entrire page. They can be used as borders, tiled over the entire container, or tiled horizontally or vertically. A single image can be used to fill an entire container if required.
Sites such as MDN Web Docs and W3Schools cover the things you can do with the various background properties, but I want to look at using multiple images as a background or filling a container with a single image as its background.
CSS background-image Vs HTML <img>
The difference between adding an image using the CSS background-image property and the HTML <img> tag really just comes down to whether the image is there for decorative or aesthetic purposes or wehther it is part of the content for illustrative purposes.
If the image is there for decorative purposes, then use CSS background-image. If the image is part of the comment then use the HTML <img> tag.
There are more technical or practical differences.
The <img> tag can be an inline or block level element and it is part of the page flow. The <img> tag is semantic in that it converys information, it is part of the content. Search engines can index the image, so it becomes part of the page's search engine optimization (SEO). The alt property is a description of the image should it fail to load and is useful for screen readers.
A brackground image is usually not printed by default.
Multiple Image Backgrounds
Take a look at the following image:
I want to place it as a background image in the top right of a div that has a plain blue background.
The CSS to do this is:
width:300px;
height:300px;
margin: auto;
background: url('images/happy-face-1-web128.webp') right top no-repeat;
background-color:blue;
The ordering of these properties is important. If the background-color property is placed before the background image properties, the div will not fill with colour.
The background property can use comma delimited to display more than one background image, such as this:
The CSS to do this is:
width:300px;
height:300px;
margin: auto;
background: url('images/happy-face-1-web128.webp') right top no-repeat, url('images/back1-web128.webp') left top repeat;
Single Image Backgrounds
One of the biggest problems with resizing an image to fit as background to a container is one of aspect ratio if any changes are made to the original container.
Consider the following two images, the first, of the hot air balloon, would be more difficult to crop and change the aspect ratio than the second, of the mountain view.
Bristol Balloon Fiesta, August 10, 1997
Mountain shades
CSS has the capability of controlling the size (MDN Web Docs & W3Schools) and position (MDN Web Docs & W3Schools) of the background image.
The CSS for the balloon image background is:
background: url('images/balloon-19970810-web800.webp'); background-position: -580px center; background-size: cover;
The CSS for the mountain image background is:
background: url('images/mountain-web800.webp'); background-position: center center; background-size: cover;
Background Image Opacity
Controlling the opacity of the background image to allow the content ot be clearer can be tricky. Adding the CSS opacity property to the container afftects everything in it. Not only does the opactiy of the background image change but so does the opacity of the content.
Some other instructions on how to lighten the background image depend on some what looks to me to be some janky methods such as layering two containers, one with the background image opacity set and the other two hold the content on top of it.
CSS has the background-blend-mode property (MDN Web Docs & W3Schools). The background can also have a colour added to it with its own alpha (transprency) settings (MDN Web Docs & W3Schools). So why not combine the two propererties?
The CSS for the above background is now:
background: url('images/balloon-19970810-web800.webp');
background-position: -580px center;
background-size: cover;
background-color: rgba(255,255,255,0.4);
background-blend-mode: lighten;
As the CSS all relates to the background, the content is unaffected by it.
Image Rollovers
The CSS hover pseudo property is used for the above image rollover. The CSS for the image tag with the id of ukflag is:
#ukflag { content:url("images/union-jack-bw-web400.webp"); }
#ukflag:hover { content:url("images/union-jack-web400.webp"); }
The background image of a container can also be changed on hover.
The CSS to change the background image in a container is slightly longer because an empty container has no size!
Here the div has the id of usflag and the CSS for it is:
#usflag { background: url("images/us-flag-bw-web400.webp");
background-size: cover;
display: inline-block;
width:400px;
height:200px;
}
#usflag:hover { background: url('images/us-flag-web400.webp'); }
Sources & Resources
5 ways to implement a striped background with CSS only (LogRocket)
Background Borders (Eos Development - Internet Archive) - Some nice images for use as borders
Background Textures (Eos Development - Internet Archive) - Some nice images for use as tiling backgrounds
background-position (MDN Web Docs)
background-repeat (MDN Web Docs)
background-size (MDN Web Docs)
Borders (Poem Tree) - Some nice images for use as borders
CSS background-image Property (W3Schools)
CSS Background Patterns You Can Use on A Website (Slider Revolution)
CSS background-position Property (W3Schools)
CSS background-repeat Property (W3Schools)
CSS background-size Property (W3Schools)
CSS Multiple Backgrounds (W3Schools)
CSS object-fit Property (W3Schools)
How to Add an Image & Background Image in HTML (HubSpot - Internet Archive)
How to fill a box with an image without distorting it (MDN Web Docs)
How to Implement a Background Image in HTML (Edureka)
How to make an image fill the background of a div (Stack Overflow)
How to Make HTML Background Image Full Screen (Scaler Topics)
HTML Background Images (W3Schools)
Microsoft Word Backgrounds (Zip file, 469Kb) - 100 old Microsoft Word background image tiles
object-fit (CSS Tricks)
object-fit (MDN Web Docs)