changing image sizes yet specifying width and have 100% width

[uworlds]

Hello,

How may I use the <picture> tag to change the sizing of a (background or other) image depending on the device size?

For example, let's say the current CSS is:

.bgimg {
  background-position: center;
  background-size: cover;
  background-image: url("img/large.jpg");
  min-height: 75%;
}

So rather than using the W3C code of:
<!-- Header with image -->
<header class="bgimg w3-display-container w3-grayscale-min" id="home">

Instead it would look something like this:
<!-- Header with image -->
<header id="home" class="w3-display-container w3-grayscale-min">
  <div>
        <picture>
            <source media="(min-width: 1501px)" background-image="img/large.jpg" style="background-position:center, width:2000px;">
            <source media="(min-width: 601px)" background-image="img/medium.jpg" style="width:1500px">
            <img background-image="img/small.jpg" alt="picture" style="width:600px">
        </picture>  
  </div>

 

Ultimately, my goal is this:

1. to specify the width and height for each image
2. have the picture change depending on the device size
3. have the image also cover the available container size to 100% width

Any help would be hugely appreciated.

Kind regards

[Ingolme]

CSS background properties do not apply to HTML images, only to files specified by the CSS background-image property.

The <source> element doesn't have a background-image attribute, you need to use the src attribute instead. I don't think CSS styles work on <source> elements because they merely are used to identify a resource on a server, it's the parent <picture> element that needs the CSS styles.

There is no equivalent of the CSS background-size: cover for HTML elements. I don't see a reason to use HTML for this problem, it would be best to just use the CSS background image. If you want different images based on screen size then you can use media queries. For widths, you can either choose to expand to fit the container or set a fixed value like 2000px; it doesn't make sense to have both. A full CSS example would look like this:

.bgimg {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("img/small.jpg");
  min-height: 75%;
}

@media screen and (min-width: 601px) {
  .bgimg {
    background-image: url("img/medium.jpg");
  }
}

@media screen and (min-width: 1501px) {
  .bgimg {
    background-image: url("img/large.jpg");
  }
}

If you want to set the size of the background image for each screen size then you can put a background-size declaration in each media query. It does not make sense to use background-size: cover in this scenario because it will be overridden. Here's an example with a fixed image size per screen size.

.bgimg {
  background-position: center;
  background-size: 600px auto;
  background-repeat: no-repeat;
  background-image: url("img/small.jpg");
  min-height: 75%;
}

@media screen and (min-width: 601px) {
  .bgimg {
    background-image: url("img/medium.jpg");
    background-size: 1500px auto;
  }
}

@media screen and (min-width: 1501px) {
  .bgimg {
    background-image: url("img/large.jpg");
    background-size: 2000px auto;
  }
}