Background image

The background of an element, beside a color, may be an image as well. That is achieved with the property called background-image.

When setting up an image, it is always a good practice to assign a color as well in case if the image cannot be rendered. When the image is rendered properly the background color, if set, will be visible only in the transparent parts of the image.

The background-image property contains following information:

value: <uri>, none or inherit;
initial: none;
applies to: all elements;
inherited: no;
percentages: N/A;
media: visual;
computed value: absolute URI or none.

If the image has intrinsic dimensions (width, height) specified as percentages, its dimensions will be relative to coordinates defined with the background-position property. If the image has any of the intrinsic dimensions and the ratio, its dimensions will be calculated from these intrinsic values; on the other hand if the image has one of the intrinsic dimensions but not the ratio its dimension will be the size of the coordinates defined by the background-position property. If the image has no intrinsic dimensions but has the ratio its dimensions are assumed to be the largest dimensions at that ratio as long as they don't exceed the dimensions given within the coordinates specified with the background-position property. Finally, if the image has no intrinsic dimensions, nor the ratio, its dimensions are assumed to be those given within the coordinates specified with the background-position property.

Example

CSS background-image property example:

<html>
<head>
<title>CSS tutorial</title>
<style type="text/css">
div {
    position:relative; overflow:visible;
    width:260px; height:110px;
    margin-top:10px; padding:1px;
    background-image:url('../../../img/tutorials/back_ex1.png');
    background-color:none;
}
div+div {
    margin-top:30px;
    background-color:#ddd;;
}
p {
    position:absolute;
    width:50%;
    margin:30px 65px;
    font-weight:bold; color:#333; font-size:12px;
}
</style>
</head>

<body>

<div>
    <p>This box has an image and no background color.</p>
</div>
<div>
    <p>This box has an image and background color.</p>
</div>

</body>
</html>

›› go to examples ››

Example

CSS background-image property example:

Comments

About

Contact

Get Connected