2

I'm working on a site which has a series of 'hero' panels running down the home page which have text overlaid on large background images.

Ideally I'd like to use inline images with srcset and sizes so the browser can choose the most appropriate image based on the screen size, rather than just whacking in the largest possible image as a background-image and then scaling it down for smaller screens.

So far my markup looks like:

<img 
  src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
  srcset="/img/trekking_320.jpg 320w,
          /img/trekking_480.jpg 480w,
          /img/trekking_600.jpg 600w,
          /img/trekking_768.jpg 768w,
          /img/trekking_960.jpg 960w" 
  data-sizes="100vw"
  class="lazyload"
>

and CSS:

img {
  position: absolute;
  height: 100%; width: auto;
}

and overflow:hidden on the container.

The height of the images is 320px up to 768px, then 480px up to 960px and then a max-height of 600px after that.

I've made a Codepen to illustrate the problem. Everything works fine on retina screens at all different screen sizes (mobile, tablet, laptop) and on a normal dpi screen it's fine too up to 768px wide, but after that the images don't fill the screen.

So is it possible to do all the things I've asked in the title? Am I on the right track or do I need to take a completely different approach?

Tyssen
  • 1,569
  • 16
  • 35

1 Answers1

5

Don't abuse <img /> for background images - use CSS background-image (with background-size: cover or fill for a 'responsive' look) but use the image-set function to specify different images for different device display resolutions:

Though as of June 2017, image-set is not supported by Firefox/Gecko, Internet Explorer or Edge - only WebKit-based browsers (Chrome, Safari, Opera): http://caniuse.com/css-image-set/embed

body {
    background-image: -webkit-image-set(
        url('path/to/image') 1x,
        url('path/to/high-res-image') 2x,
        etc...
    );
    background-size: cover;
}
Dai
  • 141,631
  • 28
  • 261
  • 374
  • I'm really after something that I can use today and it seems `image-set` only supports x descriptors. – Tyssen Jun 09 '17 at 09:33
  • @Tyssen I don't know why you're making images for different screen sizes - it seems like wasted effort. If you have text in the images (for example) then they should be positioned using CSS rather than being in the image. The whole point of CSS and responsive-styling is to prevent having to make specific new assets for different device profiles - the `srcset`/`image-set` functionality is for meaningful differences in display resolution ("resolution" meaning DPI, not pixel dimensions). – Dai Jun 09 '17 at 09:35
  • @Tyssen If you really want to go down this path, you could accomplish this goal with a simple JavaScript that executes before the page finishes loading to set a `class` attribute on the `body` element that indicates which background image should be used, e.g. `.vw320 { background-image: "320.png"; }` – Dai Jun 09 '17 at 09:37