4

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

我的代码：

<!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 屏幕。我现在很好，并且正在进一步发展，请不要现在发布答案。

4

5 回答 5

12

jsBin 演示

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 使用此/简写存在错误，因此如上所述使用。

于 2013-09-01T09:15:42.133 回答
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

于 2013-09-01T09:12:03.477 回答
1

将此设置为您的背景图像

background-size: cover
于 2013-09-01T09:08:21.047 回答
0 
background-size: 100% 100%;
background-position: top left;
background-repeat: no-repeat;

应该做的伎俩。注意 - 您可以将位置和重复组合到初始背景属性中

并申请

html, body { min-height: 100%; min-width: 100%; }
于 2013-09-01T09:18:50.887 回答
-1

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

于 2013-09-01T09:28:16.467 回答