CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mike Fisher
Mike Fisher

Reputation: 921

Full width positioning in Bootstrap?

So I'm cutting up a PSD and marking it up with Bootstrap 3. All of the content is centered inside a container div. One image and the background nav is supposed to expand the full width of the page outside of the container. I'm not sure how I can do this though.

This is what the image looks like: PSD picture

The picture I'm referring to is the center "slider" coffee cup graphic which is about 1400px wide. I'd also still like the site to be responsive. Thoughts?

This is my current progress for reference.

Current version

Upvotes: 0

Views: 114

Answers (2)

Digiguin
Digiguin

Reputation: 21

You could try something like this for the image, if it's being used as a background for a div:

background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

(Just a little bit expanded on rwaymouth's answer)

More info can be found here: http://css-tricks.com/perfect-full-page-background-image/

Upvotes: 0

rwaymouth
rwaymouth

Reputation: 76

You could try setting the background size to 'cover'. That will at least force have the image fill the entire slider. You'll probably need to tweak the positioning a bit as well, but that should hopefully get you most of the way there.

Upvotes: 1

Related Questions