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;
}

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’);}
}