1 pixel stripes for background

Hi all,

I’m about to take my first step into taking my website from XD into a working website. Im already finding it a little daunting. To add, I’ve already run into my first stumble block. I want to create 1px vertical lines that repeat at a distance of 100px distance each other that spans the width of my website. Basically super thin stripes. Can any one offer up some advice .


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey Gus,

I think css background pattern will be lightest and easiest to create.
Here’s a CSS pattern generator you can edit and then paste the code into your project’s/page’s head section.

Another option is to create an SVG 100px high with a line at the bottom, and use it as a repeating background photo.

Wow! Thanks so much for the quick response! Both approaches have really helped!

1 Like