CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbackground-imagesingle-page-application
Jack
Jack

Reputation: 324

Twitter Bootstrap Responsive Background Image

I'm trying to make a site similar to this: http://www.awerest.com/demo/myway/light/

A single paged site with a responsive image that takes up the full screen, on any device. That's my issue I can't figure out a way to get a background image to go full screen on any device.

<img src="C:\Users\Jack\Desktop\City-Skyline.jpg" class="img-responsive" alt="Responsive image">

I came across this but no luck, if some one can point me into the right direction on how to do this it would be very appertained.

Upvotes: 3

Views: 7355

Answers (1)

SW4
SW4

Reputation: 71230

The crucial part here is to set up the height of your content as 100% relative to the viewport (html element). By applying the background image to a div and not just using an img you also have a lot more flexibility in how its displayed, background-position keeps it always centered, background-size:cover keeps it scaled.

Demo Fiddle

HTML

<div></div>
<div>More Content</div>

CSS

html, body {
    height:100%;
    width:100%;
    position:relative;
    margin:0;
    padding:0;
}
div:first-of-type {
    height:100%;
    width:100%;
    background-image:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSbcnkIVXLz23PALu8JD-cTGe8KbXKC1JV0gBM_x1lx3JyaNqE7);
    background-size:cover;
    background-position:center center;
}
div:last-of-type {
    background:green;
    position:relative;
    color:white;
    height:100%;
}

Upvotes: 4

Related Questions