Background Images

Background images are tricky: it can be difficult to find a text color that is legible over the image. Also, unless done properly, the background image will be too large or will repeat itself over and over.

The following CSS demonstrates a background image. Notice the CSS is attached to the body; we are creating a background image for the entire body of the document.

Please notice the background-image element. The format is quite different from a normal image element!

The background-attachment element prevents scrolling, while the background-repeat element prevents repeating. The background-size element is set to cover and indicates the image should fill the viewport.

Always set a background color–just in case the browser does not support the background image or if something else should go wrong.

CSS

body {
	background-image: url(fcf.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: blue;
}