CODEWITHSUNDEEP
javascripthtmlcss
PEPEGA
PEPEGA

Reputation: 2283

Multiple colors in div

I want a div that looks like this enter image description here How do i set the squares to 100x100px and reapeat the process?

Upvotes: 2

Views: 124

Answers (4)

Mohammad Usman
Mohammad Usman

Reputation: 39382

If this is just solid background color you can use repeating-linear-gradient().

background: repeating-linear-gradient(to right, black, black 10px, red 10px, red 20px);

Or linear-gradient with specific background-size.

background-image: linear-gradient(to right, black 10px, red 10px, red 20px);
background-size: 20px 10px;

Both variants will do the job.

.div1 {
  background: repeating-linear-gradient(to right, black, black 10px, red 10px, red 20px);
  height: 10px;
  margin-bottom: 10px;
}
.div2 {
  background-image: linear-gradient(to right, black 10px, red 10px, red 20px);
  background-size: 20px 10px;
  margin-bottom: 10px;
  height: 10px;
}
<div class="div1">

</div>
<div class="div2">

</div>

Upvotes: 1

Patrick Mlr
Patrick Mlr

Reputation: 2965

This would be pure css:

#dotted {
  width: 1000px;
  height: 100px;
  background: repeating-linear-gradient(90deg, #DF0000, #DF0000 100px, #000000 100px, #000000 200px)
}
<div id="dotted">
</div>

Here's a jsFiddle.

If you want to set the width and the height of the squares, just change the normal height and fix the 100px inside of the background to whatever you like. The 200px have to be the double of the 100px.

Upvotes: 2

Yan Mayatskiy
Yan Mayatskiy

Reputation: 353

You can create a div with the width you need it to be for example 2000px, set background to that div with the image you want to repeat, the 2 squares black and red in your case, ande repeat it.

#div {
    width: 2000px;
    height: 100px;
    background: url("yourpicture.png") repeat-x;
}

Upvotes: 1

Luca De Nardi
Luca De Nardi

Reputation: 2321

You could do this with pure css. Have an image with a black and red squares and then repeat it on the X axis

Something like this.

div{
    background-image: url("......");
    background-repeat: repeat-x;

}

Upvotes: 0

Related Questions