CSS中的全屏响应背景图像

问题描述：

我想要此图片作为我网页的背景图片。但是，问题是图片不覆盖整个网页，您可能在中看到的此预览，它在最右端重复。是否有一种方式，使图像覆盖整个页面（无论是以任何方式，拉伸，重新调整大小或新的东西）。

I want to make this image as the background image of my webpage. However , the problem is that the image doesn't cover the whole of the page, as you may see in this preview , and it gets repeated at the rightmost end . Is there a way so that the image covers the whole page (be it any way , stretching , re-sizing , or something new).

我的代码：

<!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>

感谢。

我现在终于相信，几乎没有什么可以让图像适合我的电脑屏幕。

I have now finally come to believe that there is almost nothing that can get that image to fit exactly to my PC screen. I am now ok , and am moving further , please don't post answers now.

答

jsBin演示

jsBin demo

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

^{fixed （background-attachment）是可选的。}

^{The fixed (background-attachment) is optional.}

只是一个简写：

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 （因为位置接受单个和多个，Y）的值），但Safari与此 / 缩写有一个错误，所以使用如上所述。

where the / is used in background shorthand to separate and distinguish position from size (cause position accepts both single and multiple (X,Y) values), but Safari has a bug with this / shorthand so use as described above.

CSS中的全屏响应背景图像

相关推荐