CSS background-image

The background-image property sets one or more images as background for an element. It takes as value a list of image URLs or gradients (which are images to CSS). The images are stacked from the last in the list which appears behind to the first one in the front. The background-color appears behind all the background images.

background-image: images
background-image: url('imageUrl');
background-image: linear-gradient(to bottom, LightGreen, green);
background-image: 
    url('imageFrontUrl'),
    url('imageMidUrl'),
    url('imageBehindUrl');   /* Multiple images, last one appears behind */

Image URLs must be quoted. CSS gradients are created using a gradient function: linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient. Comma-separate images and/or gradients to have multiple layers.

Browser Support: Full for images. Almost full for gradients. IE9 and bellow don't support them. See the caniuse CSS gradients compatibility table for details.

Multiple Background Images

Use a comma-separated list of URLs for multiple background images. The last image from the list will appear behind and the first one in the front.

div.container {
height: 100px; background-color: #070707; background-image: url('codeitdown_dark.png'), url('vstripes.png'); background-repeat: no-repeat, repeat; background-position: center;
}

CSS Gradients

Gradients are images for CSS. To create a gradient background, simply use one of the gradient functions as value for the background-image property or the background shorthand. These functions are linear-gradient, radial-gradient (circular shapes), repeating-linear-gradient and repeating-radial-gradient (exactly! they repeat the gradient). The first parameter sets the starting position (end position for the standard, not yet supported), and then comes a list of color stops, two at least. See the CSS gradients page for more information. Here's for a simple gradient:

div.container {
background-image: linear-gradient(to bottom, transparent, white), linear-gradient(to right, green, orange, yellow);
}

Several gradients or a combination of grandients and images are allowed as well.

The background area

The background paints the content, padding and border areas by default. It's good practice to specify a background color that will show up before the image loads or in case it's not found.

div.container {
margin: 30px; border: 10px dashed orange; padding: 30px; background-color: brown; background-image: url('leaves.jpg');
}

The background-clip property allows customizing the painting area of the background color and image.

Stop from Repeating with background-repeat

Sometimes you want the background image to appear only once, or to be repeated horizontally or vertically only. The background-clip property allows it. A value of no-repeat will render the image once. repeat-x will produce a single horizontal row, and repeat-y does the same vertically. The case of gradients is different. They are always stretched to fit. To repeat a gradient use one of the repeating gradient functions.

div.container {
height: 100px; background-image: url('gear.png'); background-repeat: no-repeat; background-color: #f0f0f0;
}

Note that there's no way to repeat the background image a fixed number of times, twice for example (other than setting the container to be twice as wide/tall as the image).

Centering the Background Image

The background-position property allows centering the background image vertically and/or horizontally. It sets the starting position of the background image, which is repeated by default. To center a single instance of the background image set background-repeat to no-repeat.

div.container {
height: 120px; background-image: url('watermelon.png'); background-repeat: no-repeat; background-position: center center;
}

the first value of background-position gives the horizontal alignment: left, right or center. The second one gives the vertical alignment: top, centeror bottom.

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>