CODEWITHSUNDEEP
css
mathias5
mathias5

Reputation: 311

How to create this css pattern background?

I'm trying to create a repeatable background in CSS, using multiple gradients. However it does not really work as intended.

I got this JsFiddle to show my progress

The problem is that i don't get the diagonal lines to connect to long ones, as the vertical. How would i achieve that? The goal is to make it seamless.

Code:

body {
  background-image: linear-gradient(90deg, transparent 20%, black 25%, transparent 25%), linear-gradient(-45deg, transparent 20%, black 25%, transparent 25%);
  background-size: 30px 30px, 30px 30px;
}

Upvotes: 3

Views: 234

Answers (2)

the Hutt
the Hutt

Reputation: 18408

You need to correct two percentages:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-image: linear-gradient(
            -45deg,
            transparent 46%,  /* <-- increase to make black gradient center */
            black 51%,      /* <-- put black in center */
            transparent 25%
          ),
          linear-gradient(90deg, transparent 20%, black 25%, transparent 25%);

        background-size: 30px 30px, 30px 30px;
      }
    </style>
  </head>
  <body> </body>
</html>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 273004

Maybe with repeating gradient:

body {
  min-height:100vh;
  margin:0;
  background: 
    repeating-linear-gradient(90deg, #0000 0 27px, black 0 30px), 
    repeating-linear-gradient(-45deg,#0000 0 27px, black 0 30px);
}

Upvotes: 4

Related Questions