Question

我想将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>

感谢。

UPDATE：

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

Answer 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（原因位置同时接受单个和多个（X，Y）值），但Safari有这个/速记的错误，所以如上所述使用。

Answer 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

Answer 3

将此设置为背景图像

background-size: cover

Answer 4

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

应该做的伎俩。注意 - 你可以结合位置和放大器重复进入初始背景属性

并申请

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

Answer 5

你总是可以使用z-index将绝对位置div设置为100％宽度和高度，以便它可以作为背景，然后你可以为它插入具有相同css的图像。感谢

CSS中的全屏响应式背景图像

UPDATE：

5 个答案: