How to Add Background Image in HTML using CSS[Complete Guide]

Adding a background image to your website can help capture your website visitors attention.

A background picture also focuses the attention of the readers to the text appearing ontop the image.

With CSS you can easily add one or more background images to your website.

How to Insert Background Image in CSS

Start with a section on your html webpage.

<div>
  <p>Section with Background image</p>
</div>

Give it a class or an id attribute. You are going to use the class or id to target the html section.

<div id="hero-section">
  <p>Section with Background image</p>
</div>

Then, choose the image you want to add to your webpage. You can add images stored on your computer or you can link to pictures available online.

For images on your computer, put the image in the same folder as your HTML webpage for easier access.

1. Add Background Image Using Background-image Property

You can use the property background-image to add a background image to div.

In your CSS file, add the following code.

Example

#hero-section {
  background-image: url("https://background-image.avicndugu.repl.co/all-smiles.jpg");
}

For images stored in the same folder as the html file, only use the file name in the url.

Example

#hero-section {
  background-image: url("/all-smiles.jpg");
}

Result

You can barely see the image. Adding some padding helps the container occupy more space and create space for the background image.

#hero-section {
  background-image: url("all-smiles.jpg");
  padding: 7em 0;
  font-size: 2rem;
}

Result

2. Put Background Image Using Background Property

#hero-section {
  background: url("images/party-place.jpg");
  padding: 7em 0;
  font-size: 2rem;
}

Result

background property is a shorthand for background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, and background-attachment in CSS .

The normal behaviour of background image is to repeat itself until the whole background space is covered.

So, the image will only appear once if the image is tall and wide enough to cover the whole space.

You can use smaller images if you want to create a patterned background.

However, you can allow or stop the background image from repeating itself using the property background-repeat property.

You can also use a gradient instead of an actual image to create a background.

Adding More Than One Background Image

Sometimes, you may want to use two or more background images on one section of a website.

You just need to all the images url on the background-image property seperated by a comma.

background-image: url("image-1.png"), url("image-2.png"), url("image-3.png");

Example

#hero-section {
  background: url("repeat-pattern.png"), url("cup.png"), url("wavy-water.jpg");
  padding: 7em 0;
  font-size: 2rem;
  background-repeat: no-repeat;
}

Result

The order in which you add the images matter. The last image to be added appear in the bottom layer while the first image is on the top layer. The rest of the images in between follow that sequence.

Image Types to use in Background Image

You can use different types or images for the background. The most commonly used ones are .png, .jpg, .svg and .gif which are well supported by all modern browsers.

You can continue to interacting with the background image project on replit.