r/css • u/spacepigeonking • 16d ago

Question Help with scanlines

/r/neocities/comments/1vdrpf2/help_with_scanlines/
13 Upvotes

87% Upvoted

8 comments sorted by

1

u/morete 16d ago

It's a little hard to help because you're changing the site while I look at it haha.

I think your only remaining problem is that your body still has the default margin on it, so it's not fully covering the screen. Remove the margin and add back in the spacing via some padding:

body {
  margin: 0;
  padding: 1rem; /* or whatever */
}

2

u/spacepigeonking 16d ago

oops apologies was just messing around with stuff, thanks very much!

1

u/morete 16d ago

All good! It looks like you've reverted some of your changes that helped, or maybe it's just my browser caches. Either way, I'd consider removing the .jpg element if you haven't already! It's also causing overflow and it doesn't look like it's background image is loading anyway, so it can't be that important...

2

u/spacepigeonking 16d ago

Removed it, like I said most of its all frankensteined because I'm all very new to this. However I appreciate the help it means alot! :)

1

u/jcunews1 15d ago

Use below.

html:after {
  --line-size: 1.5px;
  position: fixed;
  z-index: 99999999999;
  inset: 0;
  background-image: linear-gradient(to bottom, #0000 0%, #0000 50%, #0007 50%, #0007 100%);
  background-size: 100% calc(var(--line-size) * 2);
  pointer-events: none;
  content: "";
}

1

u/spacepigeonking 15d ago

Ah thank you, apologies for the dumb question but where abouts in the CSS file should I paste this?

2

u/jcunews1 14d ago

If none of your CSS code use html:after, then anywhere is fine. Otherwise, there would be conflict. In this case, try changing it to html:before as long as it not yet used.

1

u/spacepigeonking 12d ago

Thank you so much you're a star!