Multiple Background Images Using SASS/Compass

How can I programmatically position multiple backgrounds using Sass/Compass?

You can use the SASS join function to join two lists together, and then use that master list as the background value. For example:

$columns: 12;

.col-numbers {
  $output: ();

  @for $n from 1 through $columns {
    $left: (columns($n - 1, $columns) + gutters($columns));
    $top: (-$n + 1) * 18px;
    $output: join(
      $output,
      (image-url('numbers.png'), $left $top no-repeat),
      comma
    );
  }

  background: $output;
}

For more information, check out the lists section of the SASS reference.

Compass/Sass background-image positioning

I was able to achive this using the :after psuedo class on my element.
You need to give the :after class a width and height equal to your image, and position it using CSS.

.element {
  position: relative;
  /* your element css */

  &:after {
    content: "";
    position: absolute;
    z-index: 1;
    display: block;
    width: 60px;
    height: 60px;
    right: 0;
    bottom: 0;
    background: url('../images/generated/bg-sa8e38178a4.png') no-repeat;
    background-position: 0 -120px;    
}

Background images path in Sass and Compass

You should use the image-url URL helper. It "generates a path to an asset found relative to the project's images directory" which you defined in your config.rb. You can also set the third parameter $cache-buster to false to remove the generated ?1327592426

Sass:

// image-url arguments:
// $path: path relative to images directory in config.rb
// $path-only: if true, will cause only the path to be returned instead of a `url()` function
// $cache-buster: When set to `false` no cache buster will be used (i.e. `?313420982`)
$header-img: image-url('background/sass.gif', false, false)
background-image: $header-img

Generated CSS:

background-image: url('images/background/sass.gif')

Sass/Compass - passing a variable to a nested background-image mixin

The problem is in the @include parameters. You are using Sass interpolation for both arguments, it causes the mixin treat these variables as strings instead of, in this case, colors:

type_of(#FEF1D0); // returns color
type_of(#{#FEF1D0}); // returns string

You can pass a string to color property but linear-gradientis a function and it requires a color.

To solve this problem you should remove the interpolation of the second argument to pass it as a color. You can use the interpolation for the first argument but is unnecesary so I recommend you remove it.

So you should use:

@include main-menu(nth($color, 2), nth($color, 3));

instead of:

@include main-menu(#{nth($color, 2)}, #{nth($color, 3)})

Sass Background Image mixin

depending on how your packs are structured/applied you might be able to use a loop to generate a bunch of generic styles. See the documentation here: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#id35

Do you really need 3 separate components to get your image url? wouldn't: $img and then setting that to /folder/img.ext be far easier?

Also, you don't need the #{} for repeat by the way.

I hope this is what you're after… the question is not very specific in terms of what you need the outcome to actually be.

Cheers,
Jannis

Update:

Okay, I see you've updated your question (thanks for that). I believe this could be a little better for general use:

@mixin background($imgpath,$position:0 0,$repeat: no-repeat) {
    background: {
        image: url($imgpath);
        position: $position;
        repeat: $repeat;
    }
}
.testing {
    @include background('/my/img/path.png');
}

This will then output:

.testing {
  background-image: url("/my/img/path.png");
  background-position: 0 0;
  background-repeat: no-repeat;
}

Or you can use the shorthand version:

@mixin backgroundShorthand($imgpath,$position:0 0,$repeat: no-repeat) {
    background: transparent url(#{$imgpath}) $repeat $position;
}
.testing2 {
    @include backgroundShorthand('/my/img/path.png');
}

Which will generate:

.testing2 {
  background: transparent url(/my/img/path.png) no-repeat 0 0;
}

Lastly if you want to specify your base path to your image directory separately you can do the following:

$imagedir:'/static/images/'; // define the base path before the mixin

@mixin backgroundShorthandWithExternalVar($filename,$position:0 0,$repeat: no-repeat) {
    background: transparent url(#{$imagedir}#{$filename}) $repeat $position;
}
.testing3 {
    @include backgroundShorthandWithExternalVar('filename.png');
}

This will then generate:

.testing3 {
  background: transparent url(/static/images/filename.png) no-repeat 0 0;
}

Is this what you needed?

If not feel free to update the question or reply/comment.

---

Related Topics