how to make css background grid lines

Question

There are four lines over the background. They are visible in overall sections but not over images.

How to make this?

user_445709 · Answer

It is as easy as this

body{
  background: linear-gradient(90deg, #eee 1%, transparent 1%) 1px 0, #fff;
  background-size: 200px 1px;
}

DEMO: https://codepen.io/anon/pen/VMzwNw

These and many other backgrounds can be generated using this site -> http://lea.verou.me/css3patterns/#stairs

user_463242 · Answer

You can use CSS linear gradients and multiple backgrounds to achieve this. Here's an example:

div {
  height: 100px;
  background-color: transparent;
  background-size: 25% 100%;
  background-repeat: repeat-x;
  background-image: linear-gradient(to right, black 1px, transparent 1px);
  background-position: 12.5%;
}

The gradient draws a vertical line, whereas background-size, background-position and background-repeat combined make the vertical line repeat.

Here's an example with a background image and the vertical lines:

div {
  height: 100px;
  background-color: transparent;
  background-size: 25% 100%, cover;
  background-repeat: repeat-x, no-repeat;
  background-image: linear-gradient(to right, black 1px, transparent 1px), url(http://lorempixel.com/400/200/);
  background-position: 12.5%, center;
}

how to make css background grid lines

2 Answers