Member Avatar for 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

  • 3 Contributors
  • 4 Replies
  • 334 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by gentlemedia

Dani AI

Generated

Short summary and practical notes tied to the existing replies: ’s gradient route is the simplest pure‑CSS solution and ’s pseudo‑element trick is a good fallback for older browsers or when you need a separate overlay. ’s image approach works, but it trades scalability and file size for simplicity. Below are compact, production‑friendly options (one uses CSS only and one handles the alternate interpretation of “stacked” bands).

/* vertical columns (Italian flag left-to-right) */
body {
  min-height: 100vh;
  background: repeating-linear-gradient(90deg,
    #009246 0 33.3333%,
    #ffffff 33.3333% 66.6666%,
    #ce2b37 66.6666% 100%);
}

/* horizontal bands (stacked top-to-bottom) */
body.stacked {
  min-height: 100vh;
  background: repeating-linear-gradient(180deg,
    #009246 0 33.3333%,
    #ffffff 33.3333% 66.6666%,
    #ce2b37 66.6666% 100%);
}

Key implementation tips and caveats:

  • Use the repeating variant when you want the tricolor to tile repeatedly; use a single linear-gradient (non-repeating) when you want just one full-width set of three stripes. Exact decimals like 33.3333% help avoid thin anti‑aliased seams at certain viewports.
  • If you want a wood or grain overlay like in the replies, layer the texture above the color (texture listed first in the background stack) and consider background-blend-mode: multiply or a semi-transparent overlay for readable text.
  • Avoid background-attachment: fixed on mobile (iOS Safari has bugs); if you need a fixed pattern, place a fixed-position element behind page content instead.
  • For best sharpness and smallest payload, prefer SVG or CSS gradients over large bitmap images — they scale cleanly for retina and all viewport sizes.

Checklist before publishing: confirm the orientation you actually want (columns vs bands), test at multiple widths/heights, and verify text contrast over the stripes.

Recommended Answers

All 4 Replies

Member Avatar for Member #120589

Very interesting. I played with this site: 

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 :)

Edited by Member #120589
Member Avatar for Latrell_vie

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

Member Avatar for Member #120589

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'.

Member Avatar for 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

commented: Big hand. Very nice. +15
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.