CSS中的全屏响应背景图像答案

【问题标题】：Fullscreen responsive background image in CSSCSS中的全屏响应背景图像
【发布时间】：2013-09-01 09:06:29
【问题描述】：

我想将this image 作为我网页的背景图片。但是，问题在于图像没有覆盖整个页面，正如您在this preview 中看到的那样，它会在最右边重复出现。有没有办法让图像覆盖整个页面（无论是任何方式，拉伸，调整大小或新的东西）。

我的代码：

<!DOCTYPE HTML>
<html>

    <head>
        <title>Angry Birds Star Wars</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <style>
            body {
                background: url('http://www.androidtapp.com/wp-content/uploads/2012/11/Angry-Birds-Star-Wars-Menu.png');
            }
        </style>
    </head>

    <body></body>

</html>

谢谢。

更新：

我现在终于相信，几乎没有任何东西可以让该图像完全适合我的 PC 屏幕。我现在很好，正在进一步，请不要现在发布答案。

【问题讨论】：

标签： html css image background-image

【解决方案1】：

jsBin demo

background: url(image.jpg) fixed 50%;
background-size: cover;                 /* PS: Use separately here cause of Safari bug */

^{fixed（后台附件）是可选的。}

以上只是以下的简写：

background-image      : url(image.jpg);
background-attachment : fixed;
background-position   : 50% 50%;     /* or: center center */
background-size       : cover;       /* CSS3 */

您可以在所有现代浏览器中但 Safari 使用：

background: url(image.jpg) fixed 50% / cover;

/ 在后台简写中用于区分 position 和 size（因为 position 接受单个和多个 (X,Y) 值），但 Safari 有/ 速记的一个错误，因此请按上述方式使用。

【讨论】：

@GaurangTandon 这个答案与我之前的答案有何不同？
@RokoC.Buljan 所以基本上你的版本缺乏对旧浏览器的支持。对。
@jCuber ? 旧版浏览器根本没有background-cover，所以请解释一下你的说法
@RokoC.Buljan 我不好，我用的是outdated information.

【解决方案2】：

使用background-size 属性并将背景重复设置为no-repeat。

像这样：

body { 
        background: url('http://www.androidtapp.com/wp-content/uploads/2012/11/Angry-Birds-Star-Wars-Menu.png') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

看到这个jsFiddle

【讨论】：

好的，这让它变得更好了，但是图像从底部和顶部被剪掉了一点（比较original和结果）
@GaurangTandon 那是因为center center 定位。如果您希望背景图像锚定在图像的左上角，只需将其更改为 top left。
那就更棒了，center center 更好

【解决方案3】：

为您的背景图片设置此项

background-size: cover

【讨论】：

你不能那样使用它，让它们分开属性，如背景图像和背景大小

【解决方案4】：

background-size: 100% 100%;
background-position: top left;
background-repeat: no-repeat;

应该可以解决问题。注意 - 您可以将位置和重复组合到初始背景属性中

并申请

html, body { min-height: 100%; min-width: 100%; }

【讨论】：

【解决方案5】：

您始终可以使用绝对位置 div 到 100% 宽度和高度和 z-index，以便它可以作为背景，然后您可以插入具有相同 css 的图像。谢谢

【讨论】：

-5 Nonono 如果您尝试了您所说的，图像会随着您调整窗口大小而拉伸。那是不好的。希望你不喜欢扭曲的图像... :) 关于 z-index 在这种情况下绝对不需要设置 z-indexes。