The background-image CSS property sets one or more background images on an element.

clouds sky - background image

In the following examples, we will use the "clouds.png" image as the background for the BODY or DIV elements of the website.

EXAMPLE

  <style>
    body {
      background-image: url('clouds.png');
    }
  </style>


result:

As you can see, the result is a background obtained by proportional ratio of the basic size of the image and the area of the HTML element.
If we want a different look, it can be achieved by using CSS background properties such as background-size, background-position and other properties.


The background-size CSS property

By using the CSS "background-size" property, you can define the exact size you want resize default background image of an element.

EXAMPLE

  <style>
    body {
      background-image: url('clouds.png');
      background-size: 100px 50px;
    }
  </style>


result:



The background-position CSS property

The basic background-position property is set using a length for the horizontal and vertical position.

By using the CSS "background-size" property, you can define the exact size you want resize default background image of an element.

EXAMPLE

  <style>
    body {
      background-image: url('clouds.png');
      background-position: bottom 20px right 30px;
      background-size: 100px 150px;
      background-repeat: no-repeat;
    }
  </style>


result:



result



result

CSS Background Image Full Screen

EXAMPLE

  <style>
    body {
      background-image: url('clouds.png');
      background-repeat: no-repeat;
      background-position: center
      background-size: cover;
      height: 100%;
    }
  </style>


result:



The background-attachment Property

EXAMPLE

  <style>
    body {
      background-image: url('clouds.png');
      background-size: cover;
    }
  </style>


result:



Multiple CSS Background Image

EXAMPLE

  <style>
    body {
    background: url('images/clouds.png') no-repeat left 3px top 2px,
                           url('images/airplane.png') no-repeat right 3px top 2px,
                           url('images/sun.png') no-repeat left 2px bottom 1px,
                           url('images/birds.png') no-repeat right 2px bottom 1px;
    background-size: 50% 50%;
    }
  </style>


result:



Background Image with "background-repeat" CSS property

The CSS property "background-repeat" controls how the background image will repeat and can also stop the image from repeating.

EXAMPLE
how set background-image to stop repeated

  <style>
    body {
      background-image: url('clouds.png');
      background-repeat: no-repeat;
    }
  </style>


result:




EXAMPLE
how to set background-image to repeated horizontally

  <style>
    body {
      background-image: url('clouds.png');
      background-repeat: repeat-x;
    }
  </style>


result:




EXAMPLE
how to set background-image to repeated vertically

  <style>
    body {
      background-image: url('clouds.png');
      background-repeat: repeat-y;
    }
  </style>


result:




EXAMPLE
how to set background-image to repeated round

  <style>
    body {
      background-image: url('clouds.png');
      background-repeat: round;
      background-size: 100px 75px;
      padding: 10px;
    }
  </style>


result:




EXAMPLE
how to set background-image to repeated space

  <style>
    body {
      background-image: url('clouds.png');
      background-repeat: space;
      background-size: 100px 75px;
      padding: 20px;
    }
  </style>


result:




EXAMPLE
how to set background-image repeated horizontally and vertically in combination

  <style>
    body {
      background-image: url('sun.png'), url('clouds.png');
      background-repeat: repeat-x, repeat-y;
    }
  </style>


result:



Using linear-gradient backgrounds

EXAMPLE

  <style>
    body {
      background-image: url('clouds.png');
    }
  </style>


result:



image image




simple sun png image transparent background


This is "sun.png" image with transparent background(no background).
In this example, we will use it to set a background that consists of a combination of red and an image.

EXAMPLE

  <style>
    body {
      background-color: red;
      background-image: url('sun.png');
      background-size: 25% 50%;
    }
  </style>


result:




  <style>
    body {
      background-color: red;
      background-image: url('sun.png');
      background-size: 25% 50%;
    }
  </style>


result:




This is how to set two background images overlap one over other for background.
Note once again, that the image of the sun has a transparent background.

EXAMPLE

  <style>
    body {
      background: url('sun.png'), url('clouds.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: 60% 60%, cover;
    }
  </style>


result:





Transparent background-image with CSS "opacity" property

EXAMPLE

  <style>
    body {
      background-image: url('clouds.png');
    }
  </style>


result:



how to create a blurry background-image with CSS

EXAMPLE

  <style>
    body {
      background-image: url('clouds.png');
    }
  </style>


result:



Overlay effect to Background Image Using CSS

EXAMPLE

  <style>
    body {
      background-image: url('clouds.png');
    }
  </style>


result:



How to set a Responsive Full Background Image Using CSS

EXAMPLE

  <style>
    body {
      background-image: url('clouds.png');
    }
  </style>


result: