html - CSS Square background - image

Question

I tried to make some square background using CSS only, but i got just line background without the option of horizontal lines.

This is my example code:

.container{
    background-color:red;
    width: 400px; height:200px; margin:0 auto;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, .5) 95px , transparent 50%),
    linear-gradient(rgba(255, 255, 255, 0) 5px, transparent 100%);
    background-size: 100px  100%;
}

<div class="container">

</div>

Answer 1

All you need is two gradients, one to define the horizontal lines and the other the vertical ones:

.container {
  width: 398px;
  height: 198px;
  margin: 0 auto;
  background:
    repeating-linear-gradient(to right,
        transparent 0  calc(50px - 2px),
        #fff calc(50px - 2px) 50px),
        
    repeating-linear-gradient(to bottom,
        transparent 0 calc(50px - 2px),
        #fff calc(50px - 2px) 50px)     
    red;
}

<div class="container">

</div>