CODEWITHSUNDEEP
htmlcss
Stanly
Stanly

Reputation: 673

CSS Multiple background Images

In CSS we can give multiple background images to a div by specifying 

background-image: url(img_flwr.gif), url(paper.gif);

Will all the images specified here will load? Or if first image is not available, then the second image will load? If all the images will get loaded, isn't it affect the loading time of the website?

Upvotes: 0

Views: 53

Answers (2)

user9019817
user9019817

Reputation:

Both images are loaded together. It doesn't work like a fallback:

body {
background: url('http://via.placeholder.com/350x150') no-repeat, url('http://via.placeholder.com/150x150');
}

The affect on loading time will come down to the size of the images being used.

Upvotes: 2

Horacio Coronel
Horacio Coronel

Reputation: 432

The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer.

You can read more on MDN

Upvotes: 4

Related Questions