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

Is it possible to add a background image without a URL From the Computer?

Unfortunately, it is not possible to add a background image to a webpage without specifying the image's URL. This is because web browsers need to know where to locate the image file in order to display it on the page.

Unfortunately, it is not possible to add a background image to a webpage without specifying the image's URL. This is because web browsers need to know where to locate the image file in order to display it on the page.

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.