Hi All, I have a DIV (800px width and 200px height) and I would like to give it a background-color but only ¾ of the DIV like e.g. below PS. I don’t want to use background-image It is possible to do? Thanks in advance Ziffa27
insert two floatleft DIVs inside this one, with different background color and width, otherwise you have to use a 800px*1px image as a background image.
Hi myst_dg I cannot because i have already another DIV in the middel See second image below Thanks, Ziffa27
The answer is, no. You'll have to use an image. However that image only has to be a few pixels tall (if this box is really really tall, the you want your image to be at least 10px tall, so the browser isn't repeating some 1px image a bazillion times) and let it repeat-y. or, you could take myst's answer and tweak it a bit: if there's a possibility of wrapping another container around the outside of the current box, you can kinda do the same thing: box1 will be the red one boxC will be the yellow one the following is pseudo code of course, we aren't writing XML : ) <boxC> <box1> your dark red box would go in here like however you plan... </box1> </boxC> in the CSS: boxC { set the width you want, from the left side of everyone to the right side of the yellow area, or maybe this is 100% wide? background-color: the yellow; } box1 { restrict its width so it cannot cover 100% of boxC or, conversely, don't set a width but give it a right margin as large as the amount of yellow you want to show; background-color: the lighter red; overflow should be "visible" by default; you might need something else in here like white-space: nowrap but be careful with this; } box1 content { you'll need to set a width here which is wider than box1's, and push it away from box1's left side with a left margin or something. Because it's a child of box1, it naturally sits on box1's stacking context, and should cover the red and yellow (sit over it); } This wouldn't work in IE6, who wants to stretch the width of box1 to accommodate the content, instead of letting the content overflow out. The hacks around this look ugly. However you may not be supporting IE6 : ) As you can see, using an image is much easier : ) It's a big limited by being a pixel-based thing, but I've seen people make really super-wide images and using a % for the background-position, which allowed some more flexibility in where the line between red and yellow appeared.