CODEWITHSUNDEEP
cssbackgroundlinear-gradients
Ivaylo Valchev
Ivaylo Valchev

Reputation: 10425

Multiple backgrounds with linear-gradients for repeating vertical lines with dashed line every N lines

I am trying to build a background with gradients that has the following pattern: a vertical line every 50px and a dashed line every 300px (as in every sixth line).

What I have so far is the following, which gives me a normal vertical line every 50px (live example):

body {
  background-color: aliceblue;
  background-size:  50px 50px;
  background-image: linear-gradient(to right, gray 1px, transparent 1px);
}

And I also have this, which gives me a dashed vertical line every 300px (live example):

body {
  background-color: aliceblue;
  background-size: 10px 10px, calc(50px * 6) calc(50px * 6);
  background-image:
    linear-gradient(to bottom, transparent 5px, aliceblue 5px),
    linear-gradient(to right, gray 1px, transparent 1px);
}

What I cannot come up with is how to combine them together so I can get the complete pattern. Is something like this possible with a single background?

Upvotes: 0

Views: 586

Answers (1)

A Haworth
A Haworth

Reputation: 36512

A slightly simplisitc way of doing this could be to have the solid vertical lines - 5 solid and 1 transparent - drawn in one linear gradient and the two linear gradients which form the dashed part coming next.

This means the solid lines overwrite the aliceblue of the last two linear gradients.

body {
  background-color: aliceblue;
  background-size: 300px 50px, 10px 10px, calc(50px * 6) calc(50px * 6);
  background-position: 0 0, -50px 0, -50px 0;
  background-image: linear-gradient(to right, gray 0 1px, transparent 1px 50px, gray 50px 51px, transparent 51px 100px, gray 100px 101px, transparent 101px 150px, gray 150px 151px, transparent 151px 200px, gray 200px 201px, transparent 201px), linear-gradient(to bottom, transparent 5px, aliceblue 5px), linear-gradient(to right, gray 1px, transparent 1px);
}

Upvotes: 1

Related Questions