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: 
Try this code:

```css
.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%;
}
```

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