1. Snippets
  2. ›
  3. CSS
  4. ›
  5. How to Add Background Image with CSS

How to Add Background Image with CSS

Let us demonstrate how you can add and position a background image in an HTML document with CSS styles.

Watch a video course   CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

How to position a background image.

Example of adding a background image:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url('https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
      }
    </style>
  </head>
  <body>
  </body>
</html>

Result

In the example above, the background image is positioned in the center (you can also use other values such as left top; left center; left bottom; right top; right center; right bottom; etc.).

Here are some ways of positioning a background image:

To repeat a background image, you can use the following values:

  • repeat, which repeats the background image vertically and horizontally,
  • repeat-x, which repeats the background image only horizontally,
  • repeat-y, which repeats the background image only vertically.

Example of adding a background image repeated vertically:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg");
        background-repeat: repeat-y;
      }
    </style>
  </head>
  <body>
  </body>
</html>

In the example above, the background image is repeated only vertically.

Use the "no-repeat" value so as the background image won't be repeated (the image will only be shown once).

Example of adding a non-repeated background image:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg");
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
  </body>
</html>

CSS3 introduced the background-size property, which helps us to control the background-image size as displayed in its parent element. In the following example, as a background-size value, we use “cover”, which scales the background image as much as possible so that the background image entirely covers the area.

To create a full-page background image, also add a background image to the container with the height set to 100%.

Example of adding a full-page background image:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      body,
      html {
        height: 100%;
        margin: 0;
      }
      .bg {
        background-image: url("https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg");
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <div class="bg"></div>
  </body>
</html>

To add a transparent background image, you need the opacity property, which specifies the transparency of an element. Take a value from 0.0-1.0. to decrease the transparency (e.g. 0.2 is hazy, 0.5 makes half transparent).

Example of adding a background image with a specified opacity:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        opacity: 0.5;
      }
    </style>
  </head>
  <body>
    <img src="https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg" width="300" height="150" alt="w3docs">
  </body>
</html>

In the example above, the image has 50% opacity.

Related Resources

Do you find this helpful?

Related articles