html/css: use image-set to have a portrait or landscape image as background-image for a div

user_5353105 0
Viewed 446

I'm trying to have a bootstrap 4 carousel use a landscape or portrait image as background for an item depending on the device orientation ...

following simplified code works somehow (with some style in the head) but I cannot find info on image-set so I do not know how to substitute 1x and 2x with landscape and portrait (or if that can be done):

<div class="container">
  <div class="outer">
    <div class="inner"
         style="background-image: url('landscape.jpg');
                background-image: -webkit-image-set(
                  url('landscape.jpg') 1x,
                  url('portrait.jpg') 2x);
                background-image: -image-set(
                  url('landscape.jpg') 1x,
                  url('portrait.jpg') 2x)">
      test
    </div>
  </div>
</div>

did someone get something like this to work, or does someone have a better approach ?

imageset background-image css html
2 Answers

I think, the way you are using the image-set is wrong. To be more precise the image-set is used to specify some diffrent quality images of the same picture.

As a solution i suggest that you use background-size:cover or something like that.

user_77656300

The image-set() function doesn't support changing images based on any media condition. It just supports resolution and image type parameters.

An alternative would be to use regular media queries to change the background image of an element based on the device orientation media feature.

An additional alternative would be using the <picture> element, through which you could specify different media conditions for different images via the media attribute.

user_53517210
Related