How to get scanlines over background image in CSS

Question

I have a full-page background image that I'd like to overlay scanlines over. I'm wanting to replicate the more traditional diagonal scanline effects that I grew up seeing in digital art of the noughties, such as implemented here in Bootstrap's pattern mask 5:

I've seen a few tutorials for diagonal scanlines, but haven't been able to find anything like this. How would I accomplish it in CSS?

Answer 1

here is an approximation using multiple background:

html {
  height:100%;
  background:
    radial-gradient(#000 0.5px,transparent 0.5px) 0   0   /3px 3px,
    radial-gradient(#000 0.5px,transparent 0.5px) 1px 1px /3px 3px,
    radial-gradient(#000 0.5px,transparent 0.5px) 2px 2px /3px 3px,
    url(https://i.picsum.photos/id/102/800/800.jpg) center/cover;
}

You can compare with the below that use the image pattern

html {
  height:100%;
  background:
    url(https://i.ibb.co/C0MjrsJ/05.png),
    url(https://i.picsum.photos/id/102/800/800.jpg) center/cover;
}

Answer 2

Try this code:

.view {
    position: relative;
    overflow: hidden;
    cursor: default;
}
img{
  position: relative;
    display: block;
}
.view .mask{
  position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-attachment: fixed;
  background: url(https://i.ibb.co/C0MjrsJ/05.png);
    background-attachment: fixed;
  display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%;
}

<div class="view" bis_skin_checked="1">
                <img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="Image of ballons flying over canyons with mask pattern one.">
                <div class="mask pattern-5 flex-center" bis_skin_checked="1">
                    <p class="white-text">.pattern-5</p>
                </div>
            </div>

Answer 3

Here's a very simple css solution for horizontal scanlines using a pseudo element:

.scanlines::after {
  content:'';
  position: absolute;
  width:100%;
  height: 100%;
  background-image: linear-gradient(rgba(39, 43, 46, 0.6) 1px, transparent 1px);
  background-size: 2px 2px;
  background-attachment: fixed;
}

This creates an overlay that matches the size of the root image element. Then we create the scanline - actually two lines (one dark semi-opaque, one transparent) - and repeat it. You can adjust the color and height of the line here:

background-image: linear-gradient(rgba(39, 43, 46, 0.6) 1px

and the space between the lines here:

background-size: 2px 2px;

The root element looks like this in my case:

/* The background/header image */

.scanlines {   
  background-image: url('https://www.telegraph.co.uk/content/dam/Travel/2018/January/sydney-best-GETTY.jpg?imwidth=1400');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width:100vw;
  height:100vh;
  position: relative;    
}

Codepen here:

I did play around with rotating the pseudo element 45 deg, but the results weren't satisfactory so I decided to post the answer for horizontal lines only.

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Answer 4

All of the below methods to accomplish this were provided by Temani, I've just gathered them in one place to make them easier to choose from based on your needs.

Solution 1

This solution replicates the effect exactly for Firefox, but can only approximate the effect for Chrome and Edge because they don't support sub-pixel values:

html {
  height:100%;
  /* fallback for Firefox */
  background:
    radial-gradient(#000 0.5px,transparent 0.5px) 0   0   /3px 3px,
    radial-gradient(#000 0.5px,transparent 0.5px) 1px 1px /3px 3px,
    radial-gradient(#000 0.5px,transparent 0.5px) 2px 2px /3px 3px,
    url(https://i.picsum.photos/id/102/800/800.jpg) center/cover;
  /*Chrome and the latest version of Edge*/
  background:
    conic-gradient(from -90deg at 1px 1px,#000 0 90deg,transparent 0) 0   0  /3px 3px,
    conic-gradient(from -90deg at 1px 1px,#000 0 90deg,transparent 0) 1px 1px/3px 3px,
    conic-gradient(from -90deg at 1px 1px,#000 0 90deg,transparent 0) 2px 2px/3px 3px,
    url(https://i.picsum.photos/id/102/800/800.jpg) center/cover;
}

It works on all modern versions of Firefox and Chrome, but only the very latest version of Edge.

Note that the very latest version of Edge (the Chromium-based one, and what Microsoft calls the "New Microsoft Edge") is currently only available as a standalone installer that hasn't been actively pushed by Microsoft. Therefore, it's highly unlikely for your site's users to be using this version of Edge at this point, even if they're on Windows 10 and up to date.

Solution 2

This is the exact same method used by Bootstrap in pattern-mask-5, and although it works on all modern browsers, it requires the use of an image in addition to adding a container <div> to the markup:

HTML:

<div class="bg-container">
</div>

CSS:

.bg-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(local/img.png); /* download the image here: https://i.ibb.co/C0MjrsJ/05.png and link to it */
}

Solution 3

The solution posted by Temani here is by far the cleanest, most cross-browser solution to this issue.

html {
  height:100%;
  background:
    url('data:image/svg+xml;utf8,<svg viewBox="0 0 3 3" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" /></svg>') 0   0  /3px 3px,
    url('data:image/svg+xml;utf8,<svg viewBox="0 0 3 3" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" /></svg>') 1px 1px/3px 3px,
    url('data:image/svg+xml;utf8,<svg viewBox="0 0 3 3" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" /></svg>') 2px 2px/3px 3px,
    url(https://i.picsum.photos/id/102/800/800.jpg) center/cover;
}

It makes use of SVGs and therefore doesn't require any external images, and works on all modern browsers.