Question

许多网站现在都有全屏背景照片（甚至是视频，例如http://www.paypal.fr）。

如何将全屏背景照片添加到Bootstrap页面，如此演示：

我试过

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

但照片定位不好。

Answer 1

有很多方法可以做到这一点。你可以通过css：

来做到这一点

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

Answer 2

实际上，您可以向body添加css规则，以便将图片显示为背景。

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

除此之外，如果您希望背景图片覆盖整个屏幕，您可以添加background-size属性。

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

如果您不想在较窄的屏幕上调整图像大小以保持纵横比，您可以编写如下条件规则。请记住为某些屏幕尺寸准备不同大小的照片。

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

Answer 3

使用background-size: cover;这将为您提供所需的宽高比

Se DEMO

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

与Bootstrap的全屏幕背景照片

3 个答案: