HTML Background Images

In HTML, background images can be defined for almost any element. To do this, use the CSS background-image property.

HTML Tutorial

Example

A background image in a <div> element.

<div style="background-image: url('/img/html/sunflowers.jpg');
            width:450px;height:400px;">
</div>

Sizing Considerations

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.


The background-image property

A <div> element with a background image defined by the CSS background-image property. The text displays on top of the background image.

This 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.

The background-repeat property

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

A small background image repeated multiple times.

This text is on top of a repeating background.
<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>

The background-size property

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.

This text is on top of the resized background image.
<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>

Set background image to cover the element

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.

This text is on top of a covered background image.
<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>

The background-position property

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.

This div has a positioned background image.
<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>

Shorthand background property

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.

This div is styled with the background property.
<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>

Did you know?

Did you know?

Creating gradient backgrounds

Interestingly, you can also create color gradients with the background-image property.
Here is an example:

This text is on top of a gradient background.
<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>

You may also like

Guides