CSS Background Stripes on Div

CSS Background Stripes on div

try this :

div#stripes {

  height: 200px;

  width: 200px;

  background-image: linear-gradient(45deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, #fff);

  background-size: 50px 50px;

}

<div id="stripes">

</div>

CSS background stripes with 1px white, the rest transparent

To get exact pixel dimensions, you can use pixels instead of percentages:

body {

    background: #222;

}

.stripes {

    background: repeating-linear-gradient(

      -75deg,

      #fff, /* White, starting at pixel 0 */

      #fff 1px,  /* White, continuing to pixel 1 */

      transparent 1px, /* Transparent beginning at pixel 1 */

      transparent 10px /* Transparent ending at pixel 11 (10 + 1) */

    );

    width: 180px;

    height: 56px;

    z-index: 99;

    position: absolute;

    left: 0;

    top: 0;

}

.stripes2px {

    background: repeating-linear-gradient(

      -75deg,

      #fff, /* White, starting at pixel 0 */

      #fff 2px,  /* White, continuing to pixel 2 */

      transparent 2px, /* Transparent beginning at pixel 2 */

      transparent 12px /* Transparent ending at pixel 14 (12 + 2) */

    );

    top: 56px;

}

.stripes-fade {

    background: repeating-linear-gradient(

      -75deg,

      #fff, /* White, starting at pixel 0 */

      #fff 1px,  /* White, continuing to pixel 1 */

      transparent 2px, /* Transparent beginning at pixel 2 */

      transparent 10px /* Transparent ending at pixel 12 (10 + 2) */

    );

    top: 112px;

}

<div class="stripes"></div>

<div class="stripes stripes2px"></div>

<div class="stripes stripes-fade"></div>

Background - single diagonal stripe

You just need to provide correct start and stop values for the colors. The occurrence of the multiple white stripes were due to the multiple #fff values that were used after 73.81%.

div {

  background: linear-gradient(135deg, #5cbcb0 5%, #ffffff 5%, #ffffff 15%, #5cbcb0 15%);

  /* Start #5cbcb0 from 0 and end at 5%, Start #fff at 5% and end at 15%, Start #5cbcb0 again at 15% and end at 100% */

  background-size: 593.97px 593.97px;

  background-repeat: no-repeat; /* To avoid multiple instances */

}

<div style="height: 200px;"></div>

Generate diagonal lines (stripes) in CSS

You can use base64 data as a png image. For example:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVQYV2NkIAKckTrzn5GQOpAik2cmjHgVwhSBDMOpEFkRToXoirAqxKYIQyEuRSgK8SmCKySkCKyQGEUghQD+Nia8BIDCEQAAAABJRU5ErkJggg==);

This is a good generator

An example of it at work

Center striped backgrounds in css

Yes it is. You can use repeating-conic-gradient.

div {
  height: 500px;
  background: repeating-conic-gradient(
    hsla(0,0%,100%,.2) 0deg 15deg,
    hsla(0,0%,100%,0) 0deg 30deg
  ) #ccb300;
}

<div></div>

Having Striped Dashed lines as background

You can use repeating-linear-gradient like this:

body {
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100w;
  background: repeating-linear-gradient(
    45deg,
    tomato 0px,
    tomato 2px,
    transparent 2px,
    transparent 9px
  );
}
div {
  height: 100vh;
  width: 100vw;
  background: repeating-linear-gradient(
    -45deg,
    white 0px,
    white 4px,
    transparent 4px,
    transparent 12px
  );
}

<div></div>

Stripes on background: some stripes must be transparent

You will need different gradient to simulate this random background:

.box {

  height:100px;

  border:1px solid;

  background:

    repeating-linear-gradient(-45deg,transparent 0 100px,green 100px 102px) 0 0,

    repeating-linear-gradient(-45deg,transparent 0 140px,green 140px 142px) 0 0/100% 80%,

    repeating-linear-gradient(-45deg,transparent 0 120px,green 120px 122px) 40px 10%/100% 50%;

  background-repeat:no-repeat;

}

<div class="box"></div>

---

Related Topics