Responsive & Dynamic Background Image - best practice

Question

For a long time, when I had to create a website with a lot of different pages (and with every pages having a hero section with a different background image), I used to do like this:

<div class="hero" style="background-image: url(my-dynamic-img.jpg)"></div>

And the following css:

.hero {
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
}

The image would have been loaded dynamically for each pages. In a CMS for exemple, the client would have been able to change images on it's own, without changing the css

But now, I realize it's not good at all, because you end up with loading the same image on every device (mobile, tablet, desktop...) .

So I'd like to have your opinion on the best way to do this: having 3 different images (hero-mobile.jpg, hero-tablet.jpg and hero-desktop.jpg) for the same background and target the good one automatically. The declaration of the 3 images has to be in the HTML, not in the css (so the client can change it at any time)

score 7 · Accepted Answer · answered Jul 27 '17 at 20:45

7

Have you discovered the srcset attribute? What srcset does is it allows you to add more than one image in a <img> tag and set certain conditions to it. Depending on which condition is met, the corresponding image will be shown. Time for an example

If you want an image to be viewed half of the users viewport width you would use

<img src="images/space-needle.jpg" sizes="50vw"
srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w,
images/space-needle-hd.jpg 600w">

What this does is it finds how large the users viewport width is, say its 500px wide, so your image images/space-needle.jpg 200w will load for the user.

In this example we specified that the image needs to take up half the screens width sizes="50vw". It would be impossible to show an image at 600px or 400px wide on a 500px wide screen and comfortably have it shown only at half the viewport so it chooses the 200w option.

There are many ways to specify conditions for which image should load, device pixel ratio, screen size, browser size so on and so forth.

Eduational links:
https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/
https://www.udacity.com/course/responsive-images--ud882

answered Jul 27 '17 at 20:45

Brandon Benefield

1,504
1
21
36

Thanks! I'm actually using srcset for my images. But in my situation I feel like using a background image would be more relevant. It's like a big background image for a top title (hero section basically). Do you think using an img tag would be better than using a background image? – Timtest Jul 27 '17 at 21:02
2

First off, glad I could help you learn something new. `srcset` is a very valuable attribute to learn and use with responsive web design. Secondly, I do not want to say with complete certainty, but I do not think there is a way to set a background image without CSS. Before html5 there was a `` tag you could use but has sense been deprecated to my knowledge. If you need to set a background image then its you will need to use CSS @media queries. Very easy to learn and also some invaluable knowledge for web development. https://www.w3schools.com/css/css_rwd_mediaqueries.asp – Brandon Benefield Jul 27 '17 at 21:13
1

Yep, actually I don't want to have the images set in the css sheet, because I want the client to be able to change it by itself (in a CMS for exemple). I was thinking about making a JS plugin, but I have to admit that srcset works really well and you can adjust a lot of parameters. In the same time I kinda want to use a bg-img for this specific kind of sections – Timtest Jul 27 '17 at 21:27

Eng_Farghly · Answer 2 · 2017-07-27T21:33:03.067

we will use media screen to display images in mobile , laptop and disktop screens

.hero img{
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   width:100%;
   }
  @media screen and (max-width: 500px){
        .hero img{
            display: block !important;
        }
    }
    @media screen and (min-width: 501px) and (max-width:880px){
        .hero1 img{
            display: block !important;
        }
    }
    @media screen and (min-width: 881px){
        .hero2 img{
            display: block !important;
        }  
    }

    <div class="hero" >
         <img src="https://cdn.pixabay.com/photo/2013/06/09/18/50/tulip-123795_960_720.jpg" alt="" style="display: none">
     </div>
     <div class="hero1">
         <img src="https://cdn.pixabay.com/photo/2012/03/03/23/13/tulips-21598_960_720.jpg" alt="" style="display: none">
     </div>
     <div class="hero2">
         <img src="https://cdn.pixabay.com/photo/2016/10/07/14/01/tangerines-1721620_960_720.jpg" alt="" style="display: none">
     </div>

score 0 · Answer 3 · answered Jul 27 '17 at 21:04

Well there are multiple ways of doing this , but in your case, since you want the client to modify the HTML, you should use the @media in your css:

E.g

Then in the CSS you should have a media query for each

@media (min-width: 430px) {


    .tablet {
        display:block !important;
    }
      .mobile {
        display: none !important;
    }
    .desktop{
      display: none !important;
    }
}

@media (max-width: 600px) {
    .mobile {
        display:block !important;
    }
    .tablet {
       display: none !important;
    }
    .desktop{
      display: none !important;
    }
}

@media (min-width: 900px) {
    .tablet {
       display: none !important;
    }
      .mobile {
       display: none !important;
    }
    .desktop{
      display:block !important;
    }
}

Example : https://plnkr.co/edit/Cet7wG4qrK9DcG1vlOVg?p=preview

the problem here is that you load the 3 images instead of just 1. In my case it's huge images and I don't want them to be loaded on mobile — Timtest, Jul 27 '17 at 21:30

Responsive & Dynamic Background Image - best practice

3 Answers3