CSS Property background-image

The background-image property sets the background image of a part. It accepts one image price, or multiple comma-separated values.

When quite one background image is ready, every of the pictures is sized, positioned, and covered in step with the corresponding price within the different background properties. the pictures ar then stacked on high of every different, with the primary such that being on high of the others, therefore it’s drawn as if it’s the nearest to the user.

Most of the days, once multiple background pictures ar used, most of them can have clear areas in order that the opposite background pictures will show through. See the demo below for associate example.

When setting a background image, the CSS author ought to conjointly specify a background color that may be used once the image is unavailable . once the image is out there, it’s rendered on high of the background color. Any borders such that on the component ar drawn on high of the backgrounds. therefore it is: background color at very cheap, pictures stacked higher than it, and borders on high of all those.

How the pictures ar drawn relative to the box and its borders is outlined by the background-clip and background-origin CSS properties.

Each image creates a “layer” within the component. Even the worth none creates a layer; it counts as a picture layer however attracts nothing thereon layer.

An image that’s empty (zero dimension or zero height), or that fails to transfer, or that can’t be displayed (e.g., as a result of it’s not during a supported image format) conjointly counts as a picture layer however attracts nothing.

CSS Property background-image Value

  • <image>
  • none

<image>

An to be set as a background. Multiple comma-separated images can be defined.

none

No background image is applied.

Desktop Browser Support

Mobile Browser Support

Examples

.single-bg { 
    background-image: url("single.png");
}

.class { 
    background-image: none; 
}

.multiple-bgs { 
    background-image: url(first.png), url(second.png);
}

One comment

  1. Hi, Neat post. There’s a problem together with your site in web explorer, may check this… IE still is the market chief and a huge section of people will miss your magnificent writing because of this problem.

Leave a Reply