How do i stack backgrounds on top of each other ?

[Latrell_vie]

I want my body tag to be in vertical italian flag color therefor i need color green to cover 33% of the screen , then i need color white to cover another 33% under color white and color red to cover the remaining 33% of the screen and this pattern should repeat itself. How do i do this with css or html ?
I tried sth like :

   body{background-image:url(photoshopMat/woodenGreen2.gif),url(photoshopMat/woodenWhite.jpg),url(photoshopMat/woodenRed2.gif);
        background-repeat: repeat,repeat,repeat;
        background-position:0 0, 0 25, 0 50;
        width: filled;
        height: 25%;
}

Thx for help

[diafol]

Very interesting. I played with this site: http://gradcolor.com/css3-gradient.php?c=6

body{
 background-color:green;
 filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=green, endColorstr=green);
 background-image:-moz-linear-gradient(left, green 0%, green 33%,white 33%,white 67%,red 67%,red 100%);
background-image:linear-gradient(left, green 0%, green 33%,white 33%,white 67%,red 67%,red 100%);
background-image:-webkit-linear-gradient(left, green 0%, green 33%,white 33%,white 67%,red 67%,red 100%);
background-image:-o-linear-gradient(left, green 0%, green 33%,white 33%,white 67%,red 67%,red 100%);
background-image:-ms-linear-gradient(left, green 0%, green 33%,white 33%,white 67%,red 67%,red 100%);
 background-image:-webkit-gradient(linear, left bottom, right bottom, color-stop(0%,green), color-stop(33%,green),color-stop(33%,white),color-stop(67%,white),color-stop(67%,red),color-stop(100%,red));
 }

Here's a fiddle: http://jsfiddle.net/x2c9uocv/

No images were harmed in producing this background :)

[Latrell_vie]

thx for the tip. But i just used photoshop created an italian flag and icluded it into my website as fixed background

[diafol]

You can combie a wooden overlay with stuff like this:

background-image: url('woodenOverlay.gif'), -webkit-linear-gradient(left, green 0%, green 33%,white 33%,white 67%,red 67%,red 100%);

Do the same for each version. Start with:

background-color:green;
background-image: url('woodenOverlay.gif')

It may even give you a better look as the (I'm assuming) wooden effect has a 'grain' and shouldn't have weird cut-off edges where colours meet. You may also need to use a 'repeat'.

[gentlemedia]

Here's another method which works all the way down to IE8 (in case you need to for some obscure reason) :)

body, html {
  height: 100%;
}

body {
  position: relative;
  background: white
}

body:before,
body:after {
  content: " ";
  position: absolute;
  width: 33%;
  height: 100%;
}

body:before {
  background: green
}

body:after {
  right: 0;
  background: red
}

Demo: http://codepen.io/gentlemedia/pen/GpJGqY