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

How to Add Background Image

Let us show you how to add and position a background image in your HTML document using CSS styles.

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>

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

Here are a few ways of positioning a background image:

Use the following property values to repeat a background image vertically or horizontally:

  • repeat (the background image is repeated both vertically and horizontally
  • repeat-x (the background image is repeated only horizontally)
  • repeat-y (the background image is repeated 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 given example the background image is repeated only vertically.

Use no-repeat property to not repeat a background image (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>

To create a full-page background image with CSS add a background image to the container with height: 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 {
         /* The image used */
         background-image: url("https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg");
         /* Full height */
         height: 100%;
         /* Center and scale the image nicely */
         background-position: center;
         background-repeat: no-repeat;
         background-size: cover;  }
      </style>
   </head>
   <body>
      <div class="bg"></div>
   </body>
</html>

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

Example of adding a background image with specified opacity:

<!DOCTYPE html>
<html>
   <head>
      <title>Title of the document</title>
      <style>
         img { opacity: 0.5;
         filter: alpha(opacity=50); /* For IE8 and earlier */}
      </style>
   </head>
   <body>
      <img src="https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg"
         width="300" height="150">
   </body>
</html>

The above-mentioned example is an image with 50% opacity.

In IE8 and earlier filter:alpha(opacity=x) is used, where you can set 0-100 value.
Do you find this helpful?

Related articles