How to set a background image in HTML with CSS.

Last updated : 2023-10-27

To add a background image to an element on a web page, you should use the CSS property "background-image," followed by the URL of the image you wish to use.

html

<div class="background-image-div">
  <h3>Text that will be on top of the image</h3>
</div>

css

.background-image-div {
  background-image: url(/images/background-image.png);
  /* For this example, we are using the file located inside an "images" folder in our project */

  /* 
  You can customize how the background image appears with the following properties:
  */

  /*
  ###########################
  background-position:
  background-repeat:
  background-size:
  background-attachment:
  ###########################
  */

  /* Below, we explain how each property works. */
}

CSS background-image property for inserting a background image

Just inserting the image is not enough, as it depends on the original size of the image and the dimensions of the HTML tag containing it; the background can appear in multiple ways.

For example, if the image is smaller than its container, it will repeat by default to fill the available space. On the other hand, if the image is too large, it will exceed the size of its container, causing a breakdown in your design.

Properties for adjusting CSS background image

CSS offers various properties that complement the background-image and allow us to adjust and customize the size of the background image in HTML.

background-position:

Thanks to this property, we can set the position at which the background image will be located relative to its container.

background-position: 0% 0%;

This is the default value for this property, positioning the image in the top-left corner of the element. The first value belongs to the horizontal axis, and the second on the vertical axis. You can adjust the background element's position by manipulating these values.

background-position: bottom right;

With the keywords bottom, right, left, top, you can set the background position.

background-position: center center;

With this value, the background image will be positioned in the center.

background-repeat:

Thanks to this property, we can control how the background image repeats. It's important to remember that if the image is smaller than the element containing it, it will repeat both vertically and horizontally by default until it fills the entire space.

background-repeat: repeat;

Default value: The background image will repeat to cover the entire HTML element.

background-repeat: repeat-x;

It will only repeat horizontally.

background-repeat: repeat-y;

It will only repeat vertically.

background-repeat: no-repeat;

The background image will appear only once.

background-size:

This property allows us to specify the size and space that the background image will occupy within the element.

background-size: auto auto;

This is the default value, so the background image retains its original size. If the image is larger than its container, it will be cropped, displaying only a portion of it.

background-size: 220px 140px;

You can also set the size in pixels, with the first value being the horizontal size and the second being the vertical size.

background-size: 80% 40%;

By combining percentage values, you can manipulate and display only a specific part of the background image.

background-size: contain;

This value resizes the background image to display it in full.

background-size: cover;

By setting the value to "cover," we ensure that it occupies all the available space within the element.

background-attachment:

With this property, we can control the behavior of the background image when the user scrolls on our page.

background-attachment: scroll;

The image will scroll with the rest of the page; this is the default value.

background-attachment: fixed;

The image will not scroll with the page and will remain fixed within its container, positioned according to the viewport, so only a portion of it may be visible.

Tips to consider when placing a background image on your website

Set a default background color similar to the image in case it doesn't load.
Ensure that the text on top of the HTML background image has good contrast and can be read clearly.
Unless for very specific cases, it's better not to set a background image for the entire HTML document in the body tag. For example, it's common to use this in banners, and you can apply the background directly to that element without filling the entire webpage.

Juneiker Castillo freelance web developer

I am Juneiker Castillo, a passionate front-end web developer deeply in love with programming and creating fast, scalable, and modern websites—a JavaScript enthusiast and a React.js lover ⚛️.

About me