Html CSS中的全屏响应背景图像_Html_Css_Image_Background Image

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

html css image

Html CSS中的全屏响应背景图像,html,css,image,background-image,Html,Css,Image,Background Image,我想做为我的网页背景图像。然而，问题是，正如您在中所看到的，图像并没有覆盖整个页面，并且它在最右边重复出现。有没有一种方法可以使图像覆盖整个页面（无论是拉伸、重新调整大小还是其他新的方式）我的代码： <!DOCTYPE HTML> <html> <head> <title>Angry Birds Star Wars</title> <script src="http://ajax.goo

我想做为我的网页背景图像。然而，问题是，正如您在中所看到的，图像并没有覆盖整个页面，并且它在最右边重复出现。有没有一种方法可以使图像覆盖整个页面（无论是拉伸、重新调整大小还是其他新的方式）

我的代码：

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


愤怒的小鸟星球大战
身体{
背景：url（'http://www.androidtapp.com/wp-content/uploads/2012/11/Angry-Birds-Star-Wars-Menu.png');
}

谢谢

更新：

我现在终于开始相信，几乎没有什么东西可以让这张图片完全适合我的电脑屏幕。我现在很好，正在进一步，现在请不要发布答案。

将此设置为您的背景图像

background-size: cover

使用

background size

属性并将background repeat设置为

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;
}

见此

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

固定的

（后台附件）是可选的

以上仅是以下内容的简写：

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;

在后台速记中使用

来区分

位置和大小（原因位置同时接受单个和多个（X，Y）值），但Safari在该/
速记中存在缺陷，因此如上所述使用
background-size: 100% 100%;
background-position: top left;
background-repeat: no-repeat;

我们应该做到这一点。注意-您可以将“位置和重复”组合到“初始背景”属性中
申请
html, body { min-height: 100%; min-width: 100%; }

您可以始终使用绝对位置div，使其具有100%的宽度和高度以及z索引，以便它可以作为背景，然后您可以为其插入具有相同css的图像。
谢谢
你不能那样使用它，让它们分开属性，比如背景图像和背景大小OK，这样会更好一些，但是图像是从底部和顶部切割的（比较和结果）@GaurangTandon，这是因为居中
定位。如果您希望背景图像定位在图像的左上角，只需将其更改为左上
。这将使其更为精确，居中
better@GaurangTandon这个答案与我之前的答案有何不同？@RokoC.Buljan所以基本上你的版本不支持旧浏览器。对。@jCuber？
旧版浏览器根本没有背景封面，所以请解释您的statement@RokoC.Buljan我的错，我用的是-5 Nonono如果你按你说的做，图像会随着你调整窗口的大小而拉伸。这很糟糕。希望你不喜欢扭曲的图像…：）关于z-index
，在这种情况下绝对不需要设置z-index。