Background Stripes

Type: Mixin

@include background-stripes();

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

Background Stripes Sass mixin allows you to create stylish and colorful background stripes.

Arguments

Name	Type	Description
`$color`	`list`	The color(s) of the stripes. The default there is only one color and is set to opaque black. Accepts one or more color values to create multiple color-stops.
`$thickness`	`number (with unit)`	The thickness of the stripes. The default thickness value is 1em.
`$rotation`	`number (with deg unit)`	The rotation of the stripes. The default value is set to `-45deg`. This option allows you to create diagonal or straight stripes very easily.
`$image`	`string (quoted)`	Accepts a URL of an image. This option helps you to add an image underneath the stripes to create more stylish design elements.

* Multiple color values must be space-separated (e.g. $color: red blue green).

Examples

Simply call the mixin without passing any arguments.

.element{
  @include background-stripes();
}

//CSS Output
.element {
  background-image: repeating-linear-gradient(
    -45deg, 
    rgba(0, 0, 0, 0.1) 0, 
    rgba(0, 0, 0, 0.1) 1em, 
    transparent 1em, 
    transparent 2em
  );
}

Let’s pass a $color value to it!

.element{
  @include background-stripes(
    $color: pink
  );
}

//CSS Output
.element {
  background-image: repeating-linear-gradient(
    -45deg, 
    pink 0, 
    pink 1em, 
    transparent 1em, 
    transparent 2em
  );
}

Now let’s add more colors and change the $thickness and $rotation values. Important: Don’t forget that the multiple color values must be seperated by space!

.element{
  @include background-stripes(
    $color: #FFD393 #FF974F #F54F29,
    $thickness: 3em,
    $rotation: 90deg
  );
}

//CSS Output
.element {
  background-image: repeating-linear-gradient(
    90deg, 
    #FFD393 0em, 
    #FFD393 3em, 
    #FF974F 3em, 
    #FF974F 6em, 
    #F54F29 6em, 
    #F54F29 9em
  );
}

Add an image to make your design look more alive! Just do not forget to use quotes when you pass the URL of an image.

.element{
  @include background-stripes(
    $color: rgba(blue, 0.4),
    $thickness: 3px,
    $rotation: 45deg,
    $image: "/images/backgrounds/05.jpg"
  );
}

//CSS Output
.element {
  background-image: repeating-linear-gradient(
    45deg, 
    rgba(0, 0, 255, 0.4) 0, 
    rgba(0, 0, 255, 0.4) 3px, 
    transparent 3px, transparent 6px
  ), url("/images/backgrounds/05.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

You can create an old fashioned tv screen effect as well.

.element{
  @include background-stripes(
    $color: black,
    $thickness: 1px,
    $rotation: 180deg,
    $image: "/images/backgrounds/03.jpg"
  );
}

//CSS Output
.element {
  background-image: repeating-linear-gradient(
    180deg, 
    black 0, 
    black 1px, 
    transparent 1px, 
    transparent 2px
  ), url("/images/backgrounds/03.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Just play with the values of the given arguments to create more interesting things. Use your imagination!