在div容器HTML / CSS中填充

Question

I´m trying to make the image below to fit the whole div, meaning that the background image should take the whole space and I shouldn't see the green color. Unfortunately I can´t find a way to do it.

 #imagecontainer { background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat; border: 1px solid; background-size: cover; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container no-padding" id="maincontent" tabindex="-1"> <div id="imagecontainer" class="row"> <div class="col-lg-12"> <img class="img-responsive" src="img/profile.png" alt=""> <div class="intro-text"> <h1 class="name">Start Bootstrap</h1> <h1 class="name">Start Bootstrap</h1> <h1 class="name">Start Bootstrap</h1> <hr class="star-light"> <span class="skills">Web Developer - Graphic Artist - User Experience Designer</span> </div> </div> </div> </div> 

Many thanks!

Answer 1

Your using container , use container-fluid to make it full width. Here is a demo

Answer 2

The #maincontent div has a padding, a positive margin and a width set in pixels; and the #imagecontainer has a negative margin.

This is because that's the way Bootstrap deals to accomodate items in its grid.

You could considerate using a fluid Jumbotron instead to use the full width and take the necessary vertical space for your content.

This could be of help: https://v4-alpha.getbootstrap.com/components/jumbotron/