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

Question

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

Gau*_*don 4 html css image background-image

我想将此图像作为我的网页的背景图像.但是,问题是图像不会覆盖整个页面,正如您在此预览中看到的那样,它会在最右端重复出现.有没有办法使图像覆盖整个页面(无论如何,拉伸,重新调整大小或新的东西).

我的代码:

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

Run Code Online (Sandbox Code Playgroud)

谢谢.

更新:

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

Answer 1

Rok*_*jan 11

jsBin演示

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

Run Code Online (Sandbox Code Playgroud)

^{的fixed(背景附件)是可选的.}

以上只是简写:

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

Run Code Online (Sandbox Code Playgroud)

你可以在所有现代浏览器中使用Safari:

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

Run Code Online (Sandbox Code Playgroud)

其中/在后台速记用于分离和区分position从size(原因位置接受单个和多个(X,Y)的值),但野生具有与该一个错误/速记如上所述所以使用.

归档时间：	12 年，3 月前
查看次数：	42473 次
最近记录：	9 年，12 月前