jsFiddle

Question

我有一个大图像，我想将其设置为404页面的背景。我希望每次有人加载页面时图像都是100％宽，这样如果屏幕较小，图像会变小，如果屏幕较大，图像会拉伸。高度应根据宽度而变化，不需要是页面的高度。

我没有这个代码。在HTML文件或CSS文件中做它会更好吗？

你有可能创建一个可以作为例子的JSfiddle吗？谢谢！

Answer 1

最好留给CSS。很难说没有你的代码，但以下应该做你想要的：

CSS

html {
    height: 100%;
    width: 100%;
}
body {
    width:100%; 
    height:100%;
}
#background {
    width: 100%;
    height: 100%;
    background-image: url('http://www.placekitten.com/200/200');
    background-repeat: no-repeat;
    background-size: 100%;
}

HTML

<div id="background">
    <div id="content">
        Hello world!
    </div>
</div>

的更新 的

请参阅此处的小提琴：http://jsfiddle.net/DrydenLong/jywbd/

更新＃2

我想指出，以防这些阅读通过下面的帖子看不到评论，将background-image属性直接应用于body选择器更简单，它还会将相同的图像应用于引用该CSS文件的每个页面。如果您选择为整个网站使用单个CSS文件，我上面的代码将更容易为404页面和网站的其余部分提供不同的背景图像。

Answer 2

只需将其添加到您的CSS代码...

即可

body {
    background-image:url('http://imageshack.com/scaled/large/268/gjb.png');
    background-size:100%,100%;
}

然后创建一个身体......

<body>
<a href="http://dummycode.com">Dummy Code</a>
</body>

jsFiddle

Answer 3

HTML正文内容

none

CSS

html {
    background: url(http://www.astrophotography.co.nz/Lrg_Slides/20120619Milkyway.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Demo(updated)

Answer 4

我认为你真正想要的是background-attachment财产。

body { 
background-image:url('http://IMAGEURL');
background-attachment:fixed;
width: 100%;
}

你不需要在这里设置高度属性，它会自动为你完成。

Answer 5

这个怎么样：

body{background:url(http://www.astrophotography.co.nz/Lrg_Slides/20120619Milkyway.jpg) 0 0 no-repeat; background-size:100% auto;}

HTML / CSS背景图像缩放至100％

5 个答案:

jsFiddle

HTML正文内容

CSS

Demo(updated)