CODEWITHSUNDEEP
htmlcss
Ivo
Ivo

Reputation: 2636

stretch the background of an div to full width inside container

I'm working on a website and using a 960 container in the middle, now the only problem is the designer is using different background colors on some divs.

So my code for now is:

      <div id="content">
<!-- the content needs to 960 on the width only the background need the full width of the page -->
             <div class="whitebackground">
                     <!-- content -->
             </div>

             <div class="bluebackground">
                     <!-- content -->
             </div>
        </div>

css: 

#content {

margin: 0px auto;
min-height: 700px;
position: relative;
width: 960px;

}
.whitebackground{
    width: 100%;
    background:#FFF;
}
.bluebackground{
    width: 100%;
    background:#0054fe;
}

Now the problem is the background color of the divs is of course only inside the content div. Is there some way to get the color of the divs going outside of the content div and going full width of the page?

Here is the working code http://jsfiddle.net/6cJVV/

Upvotes: 0

Views: 8605

Answers (3)

Ivo
Ivo

Reputation: 2636

I changed my content to a class so I could close it and reopen. My code looks like this now:

      <div class="whitebackground">
          <div class="content">

          </div>          
      </div>

      <div class="bluebackground">
             <div class="content">

             </div>       
       </div>

Upvotes: 0

Angel Yan
Angel Yan

Reputation: 960

You have to set the outter div to be full width and then set width: 960px; margin: 0 auto to the inner divs.
Take a look at this: Codepen

Upvotes: 1

Matt
Matt

Reputation: 147

You can do:

.object {background-size: 100% 100%;}

It is set up as so:

.object {background-size: width height;}

http://www.w3schools.com/cssref/css3_pr_background-size.asp

Upvotes: 3

Related Questions