Background Image

Type: Mixin

@include background-image();

* You can call mixins with or without gls- namespace (e.g. @include gls-background-image();).

Background Image Sass mixin allows you to apply background images to the selected element(s). Provides an easy to use one-line method.

Github Source Code

Arguments

Name	Type	Description
`$image-url`	`string`	The URL link of the background image.
`$filter-color`	`color \| list`	The color or the list of colors you may want to apply as a filter over the background image. Multiple color values must be seperated by space.
`$filter-direction`	`string`	The angle of gradient’s direction. It can be activated only when you pass multiple color values for `$filter-color` argument. Accpets `top`, `top-right`, `right`, `bottom-right`, `bottom`, `bottom-left`, `left`, `top-left` values. The default value is set `to top`.

* Use null if you want to skip an argument. For more see the examples.

Examples

Simply call the mixin in a selector and pass the URL of the background image.

.element{
  @include background-image("/images/backgrounds/07.jpg");
}

//CSS Output
.element {
  position: relative;
  background-image: url("/images/backgrounds/07.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

Now let’s apply a color filter to it by passing a color value for $filter-color argument.

.element{
  @include background-image("/images/backgrounds/07.jpg", rgba(255, 204, 153, 0.5));
}

//CSS Output
.element {
  position: relative;
  background-image: linear-gradient(to top, rgba(255, 204, 153, 0.5), rgba(255, 204, 153, 0.5)), url("/images/backgrounds/07.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

Now let’s pass multiple color values for $filter-color to make background image look even more interesting.

Important: Multiple color values must be seperated by space.

.element{
  @include background-image("/images/backgrounds/07.jpg", rgba(0, 0, 0, 0.5) rgba(40, 102, 100, 0.8));
}

//CSS Output
.element {
  position: relative;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(40, 102, 100, 0.8)), url("/images/backgrounds/07.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

Now let’s try $filter-direction option, and while trying it, let’s use sharper color transitions to see the effect clearly.

Tip: The value you pass for $filter-direction indicates the final color-stop value.

.element{
  @include background-image("/images/backgrounds/07.jpg", rgba(0, 128, 128, 0.7) rgba(255, 192, 203, 0.8), right);
}

//CSS Output
.element {
  position: relative;
  background-image: linear-gradient(to right, rgba(0, 128, 128, 0.7), rgba(255, 192, 203, 0.8)), url("/images/backgrounds/07.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

There will be times when you would like to add a background image on an element by using style attribute like in the example below. In such cases just use null to skip $image-url argument.

Important: Please examine the CSS output. When you add a background image on an element by using style attribute, the CSS output will be different then the others. This is to prevent background-image declerations that made on both sides from overriding each other.

<div class="element" style="background-image: url(/images/backgrounds/07.jpg)"></div>

.element{
  @include background-image(null, rgba(teal, 0.7) rgba(pink, 0.8), right);
}

.element {
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.element::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 128, 128, 0.7), rgba(255, 192, 203, 0.8));
}
.element > * {
  position: relative;
  z-index: 1;
}

Probably you’re asking why those "position: relative" and "z-index: 1" style rules applied to the direct children of the selected element. These style rules are exist to prevent color filters from overlying the direct children when you add the background-image on an element by using the style attribute.

Let’s try with a title text that placed inside the selected element to see it in action.

<div class="element" style="background-image: url(/images/backgrounds/07.jpg)">
  <h2>A beautiful title text standing over the color filter.</h2>
</div>

.element{
  @include background-image(null, rgba(teal, 0.7) rgba(pink, 0.8), right);
}

//CSS Output
.element {
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.element::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 128, 128, 0.7), rgba(255, 192, 203, 0.8));
}
.element > * {
  position: relative;
  z-index: 1;
}