Compass/SCSS: Multi-layered background image with hidpi image

Question

this is my first post!

I have the following need:

• A multi-layered background with a background image texture and a radial gradient
• The <section> it will be applied to is of 100% width and content dependent height
• I would like to have a media query to provide a higher dpi image for high dpi screens such as iPhone >=4. I have used Kaelig's handy SCSS mixin [1] to build a media query.

The code I have so far looks a bit like this:

section.funky-background {
  @include background(
    radial-gradient($warmRadialGradient, top right),
    image-url($darkTexture)
  );
  @include hidpi {
    @include background(
      radial-gradient($warmRadialGradient, top right),
      image-url($darkTextureHiDpi)
  );
}

without a background-size property this simply displays the larger $darkTextureHiDpi image at the same lower resolution. However adding a background-size property causes the whole background to display at the specified size and thus tile in an undesired way.

New code

@include hidpi {
  @include background(
    radial-gradient($warmRadialGradient, top right),
    image-url($darkTextureHiDpi)
  );
  background-size: 200px 200px; // $darkTextureHiDpi is 400x400px
}

My question: is there a way to define the size of the background-image png without affecting the layers above it (in this case the radial gradient)?

References

• [0] Compass Images/Background ref: http://compass-style.org/reference/compass/css3/images/
• [1] SCSS Compass Retina/HiDpi mixin: https://github.com/kaelig/hidpi

Answer 1

All of the background properties accept a list, not just the shorthand. Assuming the first image shouldn't be resized but the 2nd should, this is what it would look like:

@include hidpi {
  @include background(
    radial-gradient($warmRadialGradient, top right),
    image-url($darkTextureHiDpi)
  );
  background-size: auto auto, 200px 200px; // $darkTextureHiDpi is 400x400px
}