Full width background inside a div

Question

So, i have:

<div class="wrapper">

    <div class="full-width">
        <div class="header">
            <a href="">
                <img src="img/logo.png" alt="Logo" class="logo img-responsive" />
            </a>
            <nav>
                <ul class="nav nav-pills">
                    <li><a href="">Moden Web Design</a></li>
                    <li><a href="">Prices</a></li>
                    <li><a href="">Demonstration</a></li>
                    <li><a href="">Contact Us</a></li>
                </ul>
            </nav>
        </div>
    </div>
</div>

inside a <div class="wrapper">, that has the width:1100px;. So the question is if i can somehow make the div class="full-width" with a full width background... Because it stops at the .wrapper's margins.

I tried this method, but it doesn't work:

.full-width {
    height:50px;
    position:absolute;
    width:100%;
    z-index:100;
}

a live Fiddle will be helpful. also. did you meant `.wrapper`s padding? — avrahamcool, Sep 22 '13 at 16:11
If you plan to support only modern browsers your task is quite simple using `background-size: cover;` — Roko C. Buljan, Sep 22 '13 at 16:16
Perhaps this is what you're looking for: http://stackoverflow.com/questions/874372/background-image-at-100-of-window-and-resizes-with-it — davewoodhall, Sep 22 '13 at 16:23

score 2 · Accepted Answer · answered Sep 22 '13 at 17:05

2

I don't know your whole code but here's a Fiddle

.full-width {
  background: #333;
  height: 50px;
  position: absolute;
  left: 0;
  margin-top: 100px;
  width: 100%;
  z-index: 100;
}

answered Sep 22 '13 at 17:05

Milan and Friends

5,560
1
20
28

score 0 · Answer 2 · answered Sep 22 '13 at 16:13

0

Maybe, you could add left:0px; and try it again. You could also try using a negative margin or a width over 100%. I hope, that helped ;)

answered Sep 22 '13 at 16:13

Tim Nikischin

368
1
18

score 0 · Answer 3 · answered Sep 22 '13 at 17:03

0

you can set the size of the background using

background-size {
 Xpx Ypx;
}

or you can try giving a background to full-width's container.

answered Sep 22 '13 at 17:03

Alex

27
9

score -1 · Answer 4 · answered Sep 22 '13 at 19:10

-1

Set your css to max-width:100%; max-height:100%;

Also, read http://unstoppablerobotninja.com/entry/fluid-images

answered Sep 22 '13 at 19:10

PMint

246
2
13

Full width background inside a div

4 Answers4