CODEWITHSUNDEEP
htmlcsssass
Robin
Robin

Reputation: 43

Repeating vertical lines using CSS

I'm practicing by building a website and i want to create 5 vertical lines for the whole page. I already coded a vertical line but it won't reach the bottom of the page. How can i resolve this?

.vlines {
  position: absolute;
  top: -20vh;
  left: 0;
  z-index: -1;
  display: flex;
  width: 100%;
  height: 100%;
  opacity: 0.18;

  &__column {
    border-left: 1px solid #888;
    flex: 1;
    height: 110%;
  }
}

I expect the output to reach the bottom of the page from the very top, but the lines only reaches in one section of the page. i have 9 sections

Upvotes: 1

Views: 2136

Answers (1)

Robin
Robin

Reputation: 43

I found an answer. You can disregard the code above. Thank you!

body{
  background: linear-gradient(to right, black 1px, transparent 1px);
  background-size: 200px;
}

Upvotes: 3

Related Questions