Background image

[markoarsenal]

Hi, I often set images as backgrounds, especially when I need specific ratio, maybe mixin for that can look something like this

.thumb-image {
  @util bg-image(/assets/images/awesome-image.jpg);
}

.thumb-image {
  background-image: url(/assets/images/awesome-image.jpg);
  background-position: center;
  background-size: cover;
}

Or maybe in combination with aspect-ratio mixin

.thumb-image {
  @util aspect-ratio(16:9);
  @util bg-image(/assets/images/awesome-image.jpg);
}

[ismamz]

Hi @markoarsenal! It's good idea, but I think that maybe bg-image is not the best name because it could be confused with background-image property.

I suggest something like this: @util cover('assets/images/awesome-image.jpg');

[markoarsenal]

You're right about name :) But, I imagined that mixin can also accept other params, for example:

.thumb-image {
  @util bg('assets/images/awesome-image.jpg', top, contain);
}

.thumb-image {
  background-image: url(/assets/images/awesome-image.jpg);
  background-position: top;
  background-size: contain;
}

Maybe also to consider other params for background, those three I use the most.