CSS reponsive background image-CodePudding

I am building a website with a container and a background image but is de client is a mobile device want to prevent the client from loading this image. For bigger screens would I like to use -5 images with a different resolution for every device width. But I don't find a way to use this <img style="width: 100%;" src="./img/normal.png" srcset=" img/lowres.png 700w, img/normal.jpg 900w, img/highres.jpg 1100w" alt="test img">

in CSS, now I am using an regular high res image. (But it shouldn't load on mobile and be an appropriate size for every desktop)

max-width: 2560px;
background-image: url("../img/test_image_2.jpg");
background-repeat: no-repeat;
background-attachment: fixed;}```

CodePudding user response：

According to MDN, you can use the <picture> tag

<picture>
   <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"/>
   <source media="(min-width: 800px)" srcset="elva-800w.jpg"/>
   <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"/>
</picture>

Alternatively, you can use media queries in your css stylesheet, in this way:

.element_class{background-image: url('elva-800w.jpg');}

@media only screen and (max-width: 799px) {
    .element_class {
        background-image: url('elva-480w-close-portrait.jpg');
    }
}
@media only screen and (min-width: 800px) {
    .element_class {
        background-image: url('elva-800w.jpg');
    }
}

CodePudding user response：

You can put different

background-image: url("../img/test_image_2.jpg");

into media-queries. Browsers will only load the displayed image.