Fallback background-image if default doesn’t exist

by

You can use multiple backgrounds if there is no transparency involved and they occupy all available space or have the same size:

div{   
     background-image: url('http://placehold.it/1000x1000'), url('http://placehold.it/500x500');
     background-repeat:no-repeat;
     background-size: 100%;
     height:200px;
     width:200px;
}
<div></div>

If the first doesn’t exit, the second will be displayed.

div{   
     background-image: url('http://placehol/1000x1000'), url('http://placehold.it/500x500');
     background-repeat:no-repeat;
     background-size: 100%;
     height:200px;
     width:200px;
}
<div></div>

More Related Contents:

  1. Can I set an opacity only to the background image of a div?
  2. Why does styling the background of the body element affect the entire screen?
  3. Is it possible to have two background colors for a single html element? [duplicate]
  4. Why the content is not covered by the background of an overlapping element?
  5. Fixed background image with ios7
  6. Color of stacked semi-transparent boxes depends on order?
  7. Stretch background image css?
  8. Is there a way to use use text as the background with CSS?
  9. CSS Background image not loading
  10. Fit website background image to screen size
  11. How to create a Slanted Background with CSS? [duplicate]
  12. How to change the inner white color of Font Awesome’s exclamation triangle icon?
  13. How to center a (background) image within a div?
  14. Force iframe YouTube video to center fit and full cover the screen in the background using HTML5 CSS3
  15. How to add a background image on top of a previous background image?
  16. How to change the style of the title attribute inside an anchor tag?
  17. Word-wrap in an HTML table
  18. Last margin / padding collapsing in flexbox / grid layout
  19. set content height 100% jquery mobile
  20. Why is a div with “display: table-cell;” not affected by margin?
  21. Why isn’t object-fit working in flexbox?
  22. Resource interpreted as stylesheet but transferred with MIME type text/html (seems not related with web server)
  23. Best way to include CSS? Why use @import?
  24. Overflow:hidden dots at the end
  25. Use Font Awesome icon as CSS content
  26. What is the use of style=”clear:both”?
  27. Use multiple @font-face rules in CSS
  28. Changing the text selection color using CSS?
  29. How do I horizontally center an absolute positioned element inside a 100% width div? [duplicate]
  30. Can you have a within a ?

Leave a Comment