Responsive background-image from single image

Help
1

Is there a way to write background-image: url('assets/origanal.jpg') in a Sass file INSIDE _sass and have a list of breakpoints along with resized images outputted? So I would have css in _site that would read something like (I’ll write it in sass)

.class
   background-image: url('assets/small.jpg')

@media screen and ( min-width: 768px )
   
   .class
      background-image: url('assets/medium.jpg')

@media screen and ( min-width: 1280px )
   
   .class
      background-image: url('assets/large.jpg')

Along with the resized images in _site/assets/

Or if not, how do others handle images in their Jekyll projects and do you use background-image?

2

Are you familiar with srcset in HTML5? I don’t if it works for your background image as it is for an image tag but there is a Jekyll plugin which will give you multiple resized forms on an image and produce the srcset values for you. You don’t have to CSS I think as the browser knows to change to the appropriate image based on the dimensions.

Sample html output

<img src="/generated/test-800-195f7d.jpg"
  srcset="
    /generated/test-400-195f7d.jpg   400w,
    /generated/test-600-195f7d.jpg   600w,
    /generated/test-800-195f7d.jpg   800w,
    /generated/test-1000-195f7d.jpg 1000w
    ">
1 Like
3

You can have for loops in SASS I think, so you can try setup your breakpoints in an array and then iterate over them build up the output.

What is the issue with the CSS that you provided? Does it work but you wanted to write it in more SASS way?

4

Ideally just write,

.class
   background-image: url('assets/small.jpg')

and have the media queries and images generated on build. but…

I’m literally just now reading through the docs of Jekyll Picture Tag, so I might go that way and use background-image less often. Having read this earlier, and failing to find any in-depth conversations about responsive background-image I suspect I’m going about it all wrong and should using img more often.

5

Thanks for the share.

I’ve seen background image used for hero images but that looks like a bad idea

If the hero is a gradient or solid color then maybe background is fine and then you don’t even need a png file, with #001122.

Or https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients

.simple-linear {
  background: linear-gradient(blue, pink);
}

Or you need a background to the entire page and not just hero then background-image could be fine.

But if you want your hero to be picked up by accessibility tools and SEO then img looks better.