I have searched for an answer but couldn't find it anywhere. My question is reasonably simple: I have a background color of my body, then a large margin, and now I want a different background color inside the margin.
How do I do that with CSS?
This question is related to
html
css
margin
background-color
That is not possible du to the Box Model. However you could use a workaround with css3's border-image, or border-color in general css.
However im unsure whether you may have a problem with resetting. Some browsers do set a margin to html as well. See Eric Meyers Reset CSS for more!
html{margin:0;padding:0;}
I needed something similar, and came up with using the :before (or :after) pseudoclasses:
#mydiv {
background-color: #fbb;
margin-top: 100px;
position: relative;
}
#mydiv:before {
content: "";
background-color: #bfb;
top: -100px;
height: 100px;
width: 100%;
position: absolute;
}
Instead of using a margin, could you use a border? You should do this with <div>
, anyway.
Something like this?
Source: Stackoverflow.com