![](images/thumbs/01.jpg)
Image 1
![](images/thumbs/02.jpg)
Image 2
![](images/thumbs/03.jpg)
Image 3
![](images/thumbs/04.jpg)
Image 4
![](images/thumbs/05.jpg)
Image 5
![](images/thumbs/06.jpg)
Image 6
![](images/thumbs/07.jpg)
Image 7
![](images/thumbs/08.jpg)
Image 8
![](images/thumbs/09.jpg)
Image 9
![](images/thumbs/10.jpg)
Image 10
![](images/thumbs/11.jpg)
Image 11
![](images/thumbs/12.jpg)
* You can open your network section in dev tools, for see how images are loading
picture-01.jpg media="(min-width: 1280px)" picture-02.jpg media="(min-width: 980px)" picture-03.jpg media="(min-width: 320px)"
picture-04.jpg media="(min-width: 1280px)" picture-05.jpg media="(min-width: 980px)" picture-06.jpg media="(min-width: 320px)"
picture-07.jpg media="(min-width: 1280px)" picture-08.jpg media="(min-width: 980px)" picture-09.jpg media="(min-width: 320px)"
* You can open your network section in dev tools, for see how background-images are loading
Single Background Image
Multiple Background Images Check the console to see that these are indeed separate images.
Multiple Background Images Fallback Method ( where the first / foremost image fails ) Check the console to see that the first image is failed to load.
Responsive Background Images set Change a device pixel ratio with devtools and check the console to see which image dimension was loaded
video courtesy of Big Buck Bunny.
normal video example