Define alternative image path in CSS

Question

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?

JustAce · Accepted Answer · 2019-08-30T07:34:11.330

2

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");

edited Aug 30 '19 at 07:34

answered Aug 22 '19 at 08:45

JustAce

244
1
6
18

score 1 · Answer 2 · answered Aug 22 '19 at 08:57

1

@JustAce answer would do the job. but it can be done with JS way if your interested in: HTML:

<test onerror="changeImg()" >sdf</test>

JS:

function changeImg(){
    $('.item1').css('backgroud-image','src(".....")')
}

answered Aug 22 '19 at 08:57

FadedForEver

146
10

score 0 · Answer 3 · answered Aug 22 '19 at 08:43

0

Just copy the path from the Image from ur Devise in your CSS

Like:

.item1 {
    background-image: url("C:\Useer\Images\my_Image.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

answered Aug 22 '19 at 08:43

Paul Amstrand

11
2

score -1 · Answer 4 · answered Aug 22 '19 at 08:51

-1

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

answered Aug 22 '19 at 08:51

Gatis Negribs

21
3

4

A good answer should provide an explanation rather than just a piece of code. Please, try to explain what led you to write this code and how it would help face the issue. – David Aug 22 '19 at 12:25

Define alternative image path in CSS

4 Answers4