- This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
Viewing 9 posts - 1 through 9 (of 9 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Can I make a box (div) have a background with top half one colour and bottom half another colour, with just CSS? I’m, usually OK with CSS, but this one has got me…
You could use a gradient:
example:
background: -webkit-linear-gradient(top, #333333, #333333 49%, #666666 50%, #666666);
This is for Safari 5+ and Chrome 10+. For older versions, the code is longer. Just change the “webkit” into “ms” (IE), “mod” (Firefox) or “o” (Opera).
With CSS gradients you can.
Edit: Wow huge delay in rendering this comment.
Try this for making de gradient:
colorzilla gradients
@cynewatch meant -moz- for Gecko browsers.
Fantastic, thanks guys. I’d had a feeling that it would be a gradient but wasn’t sure I could get a perfect line between the two colours instead of a slight blur. I’ll give it a go. :D
m not sure in which browsers this will work (worked for me Mozilla, Chrome and IE8) but check this out using pseudo elements :after and :before in case you want only hard colors
http://jsfiddle.net/3jakp/4/
@cyneWATCH You would use this for best results:
background-image: linear-gradient(#333 0%, #333 50%, #666 50%, #666 100%);