CODEWITHSUNDEEP
csstwitter-bootstrap
user4381653
user4381653

Reputation:

Fullscreen background photo with Bootstrap

Lots of websites now have a fullscreen background photo (or even video, such as http://www.paypal.fr).

How to add a fullscreen background photo to a Bootstrap page like this demo:

http://getbootstrap.com/examples/cover/

I tried

<div class="site-wrapper">
  <img src="photo.jpg">

but the photo was bad positioned.

Upvotes: 1

Views: 362

Answers (3)

zkanoca
zkanoca

Reputation: 9918

Actually you can add a css rule to body in order to display a picture as a background.

body
{
    background-image: url('photo.jpg');
}

In addition to this, if you want background image to cover whole screen, you may add background-size property.

body
{
    background-image: url('photo.jpg');
    background-size: cover;
}

If you do not want to resize image on narrower screens to keep aspect ratio, you may write conditional rule like the following. Remember to prepare photos differently resized for some screen sizes.

/*for screens larger than 959px */
@media (min-width: 960px) {
    body {
        background-image: url('photo-xl.jpg');
        background-size: cover;
    }
} 

/*for screens larger than 767px */
@media (min-width: 768px) {
    body {
        background-image: url('photo-lg.jpg');
        background-size: cover;
    }
} 
/*for screens larger than 479px */
@media (min-width: 480px) {
    body {
        background-image: url('photo-xs.jpg');
        background-size: cover;
    }
}

Upvotes: 0

LOTUSMS
LOTUSMS

Reputation: 10240

Use background-size: cover; This will give you the aspect ratio you are looking for

Se DEMO

body{
     background: url("http://upload.wikimedia.org/wikipedia/en/b/b2/Brad_Pitt_boxing.jpg") no-repeat 0 0;  
     background-size:cover;
}

Upvotes: 0

Greg
Greg

Reputation: 1243

There are many ways to do this. You could do it via css:

body {
    background: url('photo.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

Upvotes: 1

Related Questions