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 CSS property "background-position" enables to set a value for the horizontal and vertical position images within background.

EXAMPLE

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

result:





EXAMPLE

  <style>
    body {
      background-image: url('airplane.png'), url('helicopter.png'), url('sun.png'), url('birds.png'), url('clouds.png');
      background-position:top, left, center, right, bottom;
      background-size:50% 80px, 30% 90px, 30% 80px, 30% 90px,50% 80px;
      background-repeat: no-repeat;
    }
  </style>

result





EXAMPLE

Below are the only possible combinations for these keywords: left top left center left bottom right top right center right bottom center top center center center bottom

  <style>
    body {
        background:
                           url('sky_stars.jpg') no-repeat top,
                           url('moon.jpg') no-repeat left 60px top 20px,
                           url('satellite.png') no-repeat right 60px top 20px,
                           url('rainbow.png') no-repeat left center,
                           url('sun.png') no-repeat center,
                           url('airplane.png') no-repeat right center,
                           url('helicopter.gif') no-repeat left 60px bottom 20px,
                           url('bird.jpg') no-repeat right 60px bottom 20px
                           url('tree.png') no-repeat bottom;
        background-size: 20% 25%;
    }
  </style>

result



JSFiddle

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

The "background-attachment" property with keyword values: fixed, scroll, local, defines whether a background image is fixed or scrolls along with the element viewport in broswer.
The background-attachment: scroll; is the behaviur "background-image" default property, when the page is scrolled, the background scrolls with it.
The background-attachment: fixed; property, will fix the background-image, and the image will not move with the rest of the document scrolls..



EXAMPLE
how to set fixed background image

  <style>
    body {
      background-image: url('clouds.png');
      background-attachment: fixed;
      background-repeat: no-repeat;
      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:



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:





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 repeat "round"

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

result:

Unlike others "background-repeat" property values, the "round" property value of the images fully corresponds to the background area ratio (without clipping or spaces), which is the main difference between them.
This is achieved by increasing or decreasing the default size of the background image, rounding its ratio in relation to the background area.

That's why the "background-repeat: round" property is also suitable for responsive web design.



EXAMPLE
how to set background-image repeated with space

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

result:

In case the ratio of image size to background area is not proportional (no clipping), "background-repeat: space;" property will evenly distribute the non-covered space between the images inside the container. The image is repeated as much as needed to cover most of the background area, without clipping an image and the first and last images always touches the edge of the container.
The size of the "space" value is difficult to control with the background-repeat property, it is possible to try with the background-position property.



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:


CodePen

Combinations CSS background-color and background-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:



EXAMPLE
combination CSS linear-gradient colors and background-image

  <style>
    body {
      background-image: linear-gradient( red 5%, rgb(255, 240, 0, 0.25), rgb(255, 240, 0, 0.25),
      green 95%), url('sun.png');
      background-position: center;
      background-size: cover;
    }
  </style>

result:



EXAMPLE
combination CSS radial-gradient colors and background-image

EXAMPLE

  <style>
    body {
      background-image: radial-gradient(rgb(255,215,0, 0.1), rgb(255,69,0, 0.8)), url('sun.png');
      background-position: center;
      background-size: cover;
    }
  </style>

result:



Transparent background-image with CSS "opacity" property

EXAMPLE

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

result:





Background-image with CSS "invert" effect property

The CSS invert function can be used to create an invert effect on an background-image.
The function accepts a value between 0 and 1, where 0 is the original image and 1 is the fully inverted image

EXAMPLE

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

result:



How to create a blurry background-image with CSS

The blurry background can be created using the "filter" property with blur() CSS function.
Add filter: blur() to apply a blurred effect to an image. the argument defines how many pixels on the screen blend into each other, so a larger value will create a more pronounced blurred effect. A larger value will create more blur. blur radius

EXAMPLE

  <style>
    body {
      background-image: url('clouds.png');
      filter: blur(5px);
      height: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
  </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: