Search code examples
htmlcssimagecdn

Define alternative image path in CSS

Actually I have a css snipped like this:

.item1 {
    background-image: url("../img/myimage1.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

I will replace this background image with an CDN image url:

background-image: url("https://cdn.com/img/myimage1.jpg");

I would like to make sure that if there is a problem with the CDN provider that an image is loaded anyway. How can I now specify an alternative local image path in addition to the defined CDN url?

Solution

  • It can be done using javascript. But using your provided CSS codes just add the second to your url something like this:

    background-image: url("https://cdn.com/img/myimage1.jpg"), url("https://otherdomain/img/myimage1.jpg");