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.

How to position a background image.

background-image: defines one or more background images for the element.
background-repeat: specifies if/how a background image is repeated.
background-attachment: defines whether a background image scrolls with the rest of a page or is fixed.
background-position: defines the starting position of a background image.

Example of adding a background image:

Example of how to add background image

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #f0f0f0;
        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>

Try it Yourself »

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:

Repeat (vertically or horizontally)
No repeat
Full page

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.

Example of adding a background image repeated vertically:

In the given example, the background image is repeated only 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>

Try it Yourself »

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

Use the no-repeat value to prevent the background image from repeating.

Example of adding a non-repeated background image:

Example of how to add a background image with the no-repeat value

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

Try it Yourself »

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:

Example of a full-page background image using the cover value

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

Try it Yourself »

To add a transparent background image, you can use the rgba() function for the background color, which allows you to set transparency alongside the color. The last parameter defines the alpha channel (0.0 to 1.0), where 0.0 is fully transparent and 1.0 is fully opaque (e.g., 0.5 makes it half transparent).

Example of adding a background image with a specified opacity:

Example of how to add a transparent background image

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .transparent-bg {
        background-image: url("https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg");
        background-color: rgba(0, 0, 0, 0.5);
        width: 300px;
        height: 150px;
      }
    </style>
  </head>
  <body>
    <div class="transparent-bg"></div>
  </body>
</html>

Try it Yourself »

In the example above, the background image has a semi-transparent overlay.