Create A Background Pattern In Css

I have the following image which has this angled stripe pattern in it, I was wondering how I could create this pattern with CSS as a background pattern. cheers, es

Solution 1:

(edit: I added a second example in the codepen)

Similar to an already given answer, but with an addition to avoid gradients:

http://codepen.io/anon/pen/EyNwOq

Give it a repating linear gradient background, but to avoid the gradients and to only get two separate colors, do it as follows (play around with the settings to get the stripe width and colors you like):

background: repeating-linear-gradient( -45deg, #0000px, #0005px, #3336px, #33311px, #00012px);

Solution 2:

it can be done with background:repeating-linear-gradient

div { 
  height:100px;
  width:100px;
  background:
  repeating-linear-gradient( -45deg,#000, #3331px,#0001px);
}

Solution 3:

You could use linear-gradient in the background and make small boxes which makes it easy to alter the width of the stripes (10px times 10px in my example) which then form the background like this:

body {
  text-align: center;
}

h4 {
  padding-top: 150px;
}

.gradient-box {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 320px;
  height: 320px;
  border: none;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgb(255, 255, 255);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: -webkit-linear-gradient(-45deg, rgba(84,84,84,0) 0, rgba(84,84,84,0) 40%, rgba(29,29,29,1) 40%, rgba(0,0,0,1) 59%, rgba(58,58,58,0) 59%, rgba(63,63,63,0) 100%), -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), -webkit-linear-gradient(-225deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), rgba(33,29,29,1);
  background: -moz-linear-gradient(135deg, rgba(84,84,84,0) 0, rgba(84,84,84,0) 40%, rgba(29,29,29,1) 40%, rgba(0,0,0,1) 59%, rgba(58,58,58,0) 59%, rgba(63,63,63,0) 100%), -moz-linear-gradient(135deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), -moz-linear-gradient(315deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), rgba(33,29,29,1);
  background: linear-gradient(135deg, rgba(84,84,84,0) 0, rgba(84,84,84,0) 40%, rgba(29,29,29,1) 40%, rgba(0,0,0,1) 59%, rgba(58,58,58,0) 59%, rgba(63,63,63,0) 100%), linear-gradient(135deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), linear-gradient(315deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), rgba(33,29,29,1);
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: 10px10px;
  background-size: 10px10px;
}

<divclass="gradient-box"><h4>Awesome striped background</h4></div>

You should be able to change the background-size and the linear-gradient colours very easily to fit what you want to achieve.