Fullscreen background photo with Bootstrap - css

Question

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.

Answer 1

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;
}

Answer 2

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;
}

Answer 3

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;
}
}