Filling a specific height range to a color in css

Question

If I have a body tag and I want to change the background color to grey from the top of the page down say 300px, how would I do this if I have content on the page over the body?

I can set the entire background color of the body tag to grey, is it possible to just define a range?

body {
    background-color: #16749F; // from 0px to 300px 
}

Why wouldn't you just create two div's with different colours and set heights? — , Sep 18 '15 at 01:26
because the way the pages are set up right now. I have the body and inside the body I have a div with a bootstrap container. The container has padding and margin values so everything lays in it with white space around it. Which is what I want for everything except the top part of the page where there is a nav menu. I want the nav menu background color to span the entire page, but I want to keep everything else inside the container — chuckd, Sep 18 '15 at 01:32
Outside of the container create another div element as
and maybe add another class for example
then set the grey-bg to the color and height? — , Sep 18 '15 at 01:35
Sounds like you might need this - http://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen — Paulie_D, Sep 18 '15 at 08:20

score 0 · Answer 1 · answered Sep 18 '15 at 01:37

If you absolutely have to avoid modifying the HTML, you can do something like:

body:before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    background: #16749F;
    width: 100%;
    height: 300px;
}

#main {
    position: relative;
    z-index: 1;
}

<div id="main">
  <p>Your current site content.</p>
</div>

score 0 · Answer 2 · answered Sep 18 '15 at 02:02

0

You could just use a background image with a solid grey colour and repeat it along the x-axis. It would have a 1px width amd 300px height.

body {background:white url(../img/grey_bg_1x300.gif) repeat-x 0 0;}

answered Sep 18 '15 at 02:02

partypete25

4,353
1
17
16

Filling a specific height range to a color in css

2 Answers2