Html CSS 中的全屏响应式背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18556896/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fullscreen responsive background image in CSS
提问by Gaurang Tandon
I want to make this imageas 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).
我想将此图像作为我网页的背景图像。但是，问题是图像没有覆盖整个页面，正如您在此预览中看到的那样，并且它在最右端重复。有没有办法让图像覆盖整个页面（无论是任何方式，拉伸，重新调整大小，还是新的东西）。
My Code:
我的代码：
<!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>
Thanks.
谢谢。
UPDATE:
更新：
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.
我现在终于相信，几乎没有什么可以使该图像完全适合我的 PC 屏幕。我现在很好，并且正在进一步发展，现在请不要发布答案。
回答by Roko C. Buljan
background: url(image.jpg) fixed 50%;
background-size: cover; /* PS: Use separately here cause of Safari bug */
The fixed(background-attachment) is optional.
的fixed（背景附件）是可选的。
The above is just a shorthand for:
以上只是以下内容的简写：
background-image : url(image.jpg);
background-attachment : fixed;
background-position : 50% 50%; /* or: center center */
background-size : cover; /* CSS3 */
You've could in all modern browsers but Safariuse:
您可以在所有现代浏览器中使用，但 Safari使用：
background: url(image.jpg) fixed 50% / cover;
where the /is used in background shorthand to separate and distinguish positionfrom size(cause positionaccepts both single and multiple (X,Y) values), but Safari has a bug with this /shorthand so use as described above.
其中/在后台速记用于分离和区分position从size（原因位置接受单个和多个（X，Y）的值），但野生具有与该一个错误/速记所以使用如上所述。
回答by cbr
Use the background-sizeattribute and set the background repeat to no-repeat.
使用该background-size属性并将背景重复设置为no-repeat。
Like this:
像这样：
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;
}
See this jsFiddle
看到这个jsFiddle
回答by slash197
Set this for your background image
将此设置为您的背景图像
background-size: cover
回答by Sgoldy
background-size: 100% 100%;
background-position: top left;
background-repeat: no-repeat;
should do the trick. Notice - you can combine position & repeat into the initial background attribute
应该做的伎俩。注意 - 您可以将位置和重复组合到初始背景属性中
And apply
并申请
html, body { min-height: 100%; min-width: 100%; }
回答by designerNProgrammer
You can always use a absolute position div to 100% width and height with z-index so that it can be a background, then you can insert the image with same css for it. thanks
您始终可以将绝对位置 div 与 z-index 一起使用到 100% 宽度和高度，以便它可以作为背景，然后您可以为它插入具有相同 css 的图像。谢谢
