Div's Background in Bootstrap full width

Thanks for your answer. But it still doesn't work:( I have a div with the class of container and container-full-width. In css i set the div's width of 100% but it doesn't work:(

Ok, do you have a div and you are trying to define a background to it and its not taking the full width of the div? Or are you trying to make the div itself take a width of 100% of the full body content?

div {
  width: 100%;  /*this will make the div take 100% of the full content*/
}

div img {
 width: 100%;  /*this will make the image that is inside the div to take 100% of the div*/
}

Let me know if that helped.

I have a div with this css : .container-full-width { background: url(../img/img_2.jpg) no-repeat; width: 100%; height: 600px;
}

But it also has the bootstrap container class. Now i want to make it the full width of the browser-window.

use

body {
    margin: 0 auto;
    padding: 0 auto;
}

it will reset the browser automatic paddings and margins and will allow you to stretch the whole div across the browser.

Let me know if that worked for you :)

It's confusing.. It still doesn't work. I also tried with a new div and set it's background to a color. But it doesn't want to take the whole width:(::(

I deleted the container div which is around all the others ( after the body element) Now it works. Can anyone maybe explain me what's going on here? :D Do I need the container around my whole document? Thanks:)

Sure, the container div, has it's own attributes and is located in the body, there are some automatic CSS setting applying to elements and maybe that's the reason it was happening, you can use a normalize CSS file which will help you reset those settings but I do not want to confuse you know with that. Keep learning here on treehouse and you will get to that and you will understand things a lot better. I promise you :)

Don't stop learning. Have a great day :)

Here is an example using Bootstrap 3.2 using two ways: 1) I applied a background image to a div with the class col-lg-12 for maximum width 2) I added an image within a div with the class col-lg-12 for maximum width.

I also added a max-height of 200px for both and hide the overflow so that the image height does not add space to the div.

You can see it live here: http://www.bootply.com/5csKluxsvn

Also there is a special case where if you add the <img> element it will apply an auto scale as I mentioned before.

Does this help?

A little bit. But it doesn't work, also if I set the image as the background of the col-lg-12 divs :(

I gave my html und body element a width of 100% and now it works. But I have a small margin which I can't delete:(

Hi Norman,

Did you apply this to the body?

body {
  margin: 0 auto;
  padding: 0 auto;
}

Try that on the div as well.

Yes, i did. It's confusing...

Does anyone have an idea? I didn't find a solution till now :( Also if i use the jumbotron class...

Wrap the container in a section...

<section id="new-section">
        <div class="container">
              <div class="row">
                    <div class="col-md-12">
                           <p>Content goes here</p>
                    </div>
              </div>
        </div>
</section>

Yup it is possible just give the div's background a width of 100%

Let me know if that works for you :)

Bootstrap has a container class called .container-fluid that is set to 100% by default width, and will span the entire display.