Rendering a dynamically generated background based on width

Question

So I have a background image attribute (as a string referencing an image in the project), that belongs to a Badge table.

I'm rendering each background image based on the current path. But I want to render different images at two different max-widths.

For example,

.badge-headline-background{style: "background-image:url(../assets/header-graphics/#{@badge.background})"}

renders a background at full width, while

.badge-headline-background{style: "background-image:url(../assets/small-header-graphics/#{@badge.background})"}

should use the smaller image once the max-width gets around 700px.

Tweaking the background-position and background-size isn't an option. It has to be two separate images.

Any input appreciated. Thanks!

Answer 1

This should work, using the dynamic value

.badge-headline-background

:css
  .badge-headline-background { 
    background-image: url("../assets/header-graphics/#{@badge.background}");
  }
  @media (max-width: 700px) {
    .badge-headline-background { 
      background-image: url("../assets/small-header-graphics/#{@badge.background}");
    }
  }

Answer 2

.class {background-image: url(whatever-1.jpg);}    
@media (max-width:700px) { .class {background-image: url(whatever-2.jpg;)} }