Background Images

Please be aware that background images, while neat, can become distracting. Be sure that text is legible on the images (refer to the linear gradient document for a suggestion regarding darkening background images).

Single Background Image

A single image can be used as a background for an entire page or for a section of a page. Be sure to include a fallback background color just in case!

The following example uses a single image sized to cover the entire page; the image cannot repeat. Note the image must be large enough!

body {
    background-image: url(AlleySpringMill.JPG);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-color: silver;
}

Properties

• background-image: provides the image source
• background-repeat: controls the repetition of the image
• background-size: used to scale or resize the image; may be set to contain, cover, or to size units representing width then height.
• background-attachment: determines how the background image moves; may be fixed, local, or scroll. Local causes the background image to scroll within the element.
• background-color: this sets a fallback color.
• background-clip: this property determines whether the background image extends beneath the border box, padding box, content box, or text. Values include border-box, padding-box, content-box, and text.
• background-origin property: determines location of background image. Values include padding-box (image starts at top left of the padding box), border-box (image starts at top left of the border), and content-box (image starts at top left corner of content). This will not work if background-attachment is set to fixed.

Multiple Background Images

As of this writing, the use of multiple background images is somewhat out of style.

Be sure to apply a normal background image (or color, preferably) first, as a fallback method.

.bg {Background: url(‘1.png’), url(‘2.png’),url(‘3.ping’)};

We can also declare size of the images.

.bg {Background: url(‘1.png’), url(‘2.png’),url(‘3.ping’);
Background-size: 100% 50%, 300px 400px, auto auto;
};

Note that these values occur in pairs. As needed, you can also specify position exactly.

High-Resolution Background Images

We can use media queries to provide different background images based on device resolution.

.bg {Background-image: url(‘bg.jpg’);}
@media (min-resolution: 1.5dppx) {
.bg {Background-image: url(bg@1.5x.jpg’);}
}