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](https://mdbootstrap.com/docs/jquery/css/masks/) in Bootstrap's pattern mask 5:

[![enter image description here](https://i.stack.imgur.com/KndXB.png)](https://i.stack.imgur.com/KndXB.png)

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: 
here is an approximation using multiple background:

```css
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

```css
html {
  height:100%;
  background:
    url(https://i.ibb.co/C0MjrsJ/05.png),
    url(https://i.picsum.photos/id/102/800/800.jpg) center/cover;
}
```
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](https://codepen.io/doughballs/pen/vYNmyQE):

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>