CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Marc Brigham
Marc Brigham

Reputation: 2264

Full width jumbotron image

I'm trying to make the image have the same width as the browser screen. It needs to be responsive. I'm new at bootstrap 3 so any help is greatly appreciated.

Here is a code playground like for you to see exactly what I mean.

http://bootply.com/98241

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

Upvotes: 9

Views: 34926

Answers (3)

Diana De Jesus
Diana De Jesus

Reputation: 21

I was having the same issue. I took mine outside of 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%;
}

Upvotes: 2

alans
alans

Reputation: 1040

According to the Bootstrap documentation, to make .jumbotron full width, take it outside of any .container.

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

Upvotes: 12

Carol Skelly
Carol Skelly

Reputation: 362470

Make the img width 100%..

.widewrapper {
  width:100%;
  }

.widewrapper > img {
  width:100%;
}

Bootply

Upvotes: 3

Related Questions