Full width image of jumbotron

Question

I am trying to make an image with the same width as the browser screen. He must be responsive. I'm new to bootstrap 3, so any help is greatly appreciated.

Here is a playground for codes, as for you to see exactly what I mean.

http://bootply.com/98241

You will see that the jumbotron image is aligned to the left. I need to stretch the entire width of the page.

Answer 1

Make the img width 100%.

.widewrapper { width:100%; } .widewrapper > img { width:100%; } 

Bootply

Answer 2

According to Bootstrap's documentation, to make .jumbotron full width, push it outside of the .container .

http://getbootstrap.com/components/#jumbotron

Answer 3

I had the same problem. I took mine outside the container in html and used the following code in my CSS:

 jumbotron { position: relative; background: url("img.url") no-repeat center center; width:100%; height: 100%; background-size: 100% 100%; }