0

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

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

您可以创建一个可以作为示例的 JSfiddle 吗？谢谢！

4

5 回答 5

2

这最好留给 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 页面和网站的其余部分设置不同的背景图像。

于 2013-08-06T18:16:40.067 回答
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

于 2013-08-06T18:22:25.683 回答
1

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

演示（更新）

于 2013-08-06T18:20:16.600 回答
1

我认为你真正要找的是background-attachment房产。

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

您不需要在这里设置 height 属性，它会自动为您完成。

于 2013-08-06T20:07:15.070 回答
0

这个怎么样：

body{background:url(http://www.astrophotography.co.nz/Lrg_Slides/20120619Milkyway.jpg) 0 0 no-repeat; background-size:100% auto;}
于 2013-08-06T18:23:57.620 回答