Gumby SCSS Framework - Using Respond for Retina Background Images [closed]

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.

---

This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.

Closed 6 years ago.

Improve this question

Very specific question about working with the respond mixin in the Gumby framework.

To get retina background images working right in CSS, you would need to use the respond mixin (http://gumbyframework.com/docs/mixins/#!/respond), and pass the 'min-device-pixel-ratio' attribute.

I dont think respond in gumby is setup to do this, but maybe somebody on here has tried? It would be easy to do with a traditional media query but I want to use the framework hooks wherever I can, keep my codebase light.

Any insights? Code sample below - I think this is how you would format this in SCSS.

  //bg image + container
  .hero-background {
    background: url('../images/image.png') no-repeat bottom center;
    height: 100%;
    margin-top: -2em; 
    min-height: 53em;
    min-width: 100%;

    //for retina background images in Gumby, not sure if this works
    @include respond("min-device-pixel-ratio: 2") {
      background: url('../images/image.png') no-repeat bottom center; 
      background-size: 1429px 538px;
    }

This is what I get for CSS output

.hero-background {
    background:url(../images/GT_web_trucks_bwphoto.png) no-repeat bottom center;
    height:100%;
    margin-top:-2em;
    min-height:53em;
    min-width:100%
}

@media only screen and (min-device-pixel-ratio:2){
    .hero-background {
        background:url(../images/GT_web_trucks_bwphoto@2x.png) no-repeat bottom center;
        background-size:1429px 538px
    }
}

Answer 1

As it turns out, yes this is possible and the above syntax does work.