arg0

Perfect Background Image Control

Published on

I often find myself going back to this great CSS-Tricks article on how to set up the perfect full page background image, but I wanted to make something a bit more useful for me for a few reasons:

So here is a little snippet that fixes these issues for me:

background-image: url("/my/static/image.jpg");
background-color: rgba(0, 0, 0, 0.7);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-blend-mode: multiply;

and here's a mixin for it:

@mixin bgCover($imageUrl, $overlayColor: transparent) {
  background-image: url($imageUrl);
  background-color: $overlayColor;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
}

then you can use it like this:


// Adds the original image properly sized with no tint as the background image.
.my-bg-element {
  @include bg-cover("/my/static/image.jpg");
}

// Adds the image properly sized with a dark tint as the background image.
.my-darker-bg-element {
  @include bg-cover("/my/static/image.jpg", rgba(0, 0, 0, 0.7));
}
Back Home | Back To Top | View on GitHub