Background images can be defined for almost any HTML element.
To add a background image, use the CSS background-image property.
A <div> element with a background image.
<div style="background-image: url('/img/html/sunflowers.jpg');
width:450px;height:400px;">
</div>
For more details on background-image, see our CSS background-image property reference.
To add a background image, there are some sizing considerations:
When the image is larger than the element, the image is cropped.
When the image is smaller than the element, the image is repeated -- in the x and y direction.
Next, let's review how to create background images with CSS.
A <div> element with a background image defined by the CSS background-image property.
The text displays on top of the background image.
<div style="background-image: url('/img/html/sunflowers.jpg');">
<div style="padding:30px;color:white;">
This text displays on top of the background image
</div>
</div>
Tip: Background images can also be defined with external CSS.
By default, smaller background images are repeated horizontally and vertically.
The CSS background-repeat property adjusts how the image will repeat.
Possible values are:
repeat-x -- repeat horizontally,repeat-y -- repeat vertically,repeat -- repeat both horizontally and vertically, or no-repeat -- don't repeat<style>
.sunflowers {background-image:url('/img/html/sunflowers-sm.jpg');
background-repeat:repeat; padding:30px; color:white;}
</style>
<div class="sunflowers">
This text is on top of a repeating background.
</div>
A small background image repeated multiple times.
For more details on background-repeat, see our CSS background-repeat property reference.
By default, background image size is the actual size of the image.
The CSS background-size can change the background image size.
It accepts one or two values. The first value is width, the second is height.
If only width is provided, it will adjust the height according to the image ratio.
A-200 pixel background image that is not repeated.
<style>
.bg-size {background-image: url('/img/html/sunflowers.jpg');
background-size:200px; background-repeat:no-repeat;
padding:30px; }
</style>
<div class="bg-size">
This text is on top of the resized background image.
</div>
For more details on background-size, see our CSS background-size property reference.
To ensure that the background image fully covers the element use background-size:cover.
This will stretch or crop the background image to cover the entire element.
<style>
.bg-cover {
background-image: url('/img/html/sunflowers.jpg');
background-size:cover; background-repeat:no-repeat;
padding: 30px; color:white;
}
</style>
<div class="bg-cover">
This text is on top of a covered background image.
</div>
Use background-position to set the position of the background image inside the hosting element.
The image can be positioned at the top, bottom, left, right, or center.
It accepts single value (if value is center), or two values: vertical and horizontal position.
A resized background image that is positioned top right.
<style>
.bg-pos {
background-image: url('/img/html/sunflowers.jpg');
background-repeat:no-repeat; background-size:300px;
background-position:top right; padding:30px; }
</style>
<div class="bg-pos">
This div has a positioned background image.
</div>
For more details on background-position, see our CSS background-position property reference.
The CSS background property is a shorthand for several background image properties.
It sets the url, repeat, position, and other properties in one operation.
A single background property sets the url, repeat, and position for the background image.
<style>
.bg-prop {
background:url('/img/html/sunflowers.jpg') no-repeat top right;
padding:30px; color:white; }
</style>
<div class="bg-prop">
This div is styled with the background property.
</div>
For more details on background, see our CSS background property reference.
Interestingly, you can also create color gradients with the background-image property.
Here is an example:
<style>
.bg-gradient {
background-image: linear-gradient(#339977, white);
padding: 30px;
}
</style>
<div class="bg-gradient">
This text is on top of a gradient background.
</div>
