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

Question

I have a large image that I want to set as the background for a 404 page. 我有一张大图像，想要设置为404页面的背景。 I want the image to be 100% wide every time someone loads the page, so that if their screen is smaller the image becomes smaller, if the screen is bigger, the image stretches. 我希望每次有人加载页面时图像的宽度都是100％，这样，如果他们的屏幕较小，则图像会变小；如果屏幕较大，则图像会拉伸。 The height should change based on the width, it doesn't need to be the height of the page. 高度应根据宽度而变化，它不必是页面的高度。

I don't have the code for this. 我没有此代码。 Would it be better to do it in the HTML file or the CSS file? 在HTML文件或CSS文件中执行此操作会更好吗？

Can you possible create a JSfiddle that could serve as an example? 您可以创建一个可以作为示例的JSfiddle吗？ Thanks! 谢谢！

Answer 1

This is best left to CSS. 最好留给CSS。 Hard to tell without your code exactly, but the following should do what you want: 如果没有您的代码，很难说清楚，但是以下应该做您想要的：

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 的HTML

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

UPDATE 更新

See the fiddle here: http://jsfiddle.net/DrydenLong/jywbd/ 在这里查看小提琴： http : //jsfiddle.net/DrydenLong/jywbd/

UPDATE #2 更新＃2

I'd like to point out, just in case those reading through don't see the comments on my post below, that while applying the background-image property directly to the body selector is simpler, it will also apply that same image to every page referencing that CSS file. 我想指出的是，以防万一那些通读的人看不到下面我的帖子的评论，虽然将background-image属性直接应用到body选择器比较简单，但也会将相同的图像应用到每个引用该CSS文件的页面。 Should you choose to use a single CSS file for your entire website, my code above will make it easier to have different background images for the 404 page and the rest of the site. 如果您选择在整个网站上使用单个CSS文件，那么上面的代码将使404页和网站其余部分具有不同背景图像的操作变得更加容易。

Answer 2

Just add this to your CSS code... 只需将其添加到您的CSS代码中...

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

And then create a body... 然后创建一个身体...

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

jsFiddle jsFiddle

Answer 3

HTML Body content HTML正文内容

none

CSS 的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

I think what you are really looking for is a background-attachment property. 我认为您真正想要的是background-attachment属性。

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

You dont need to setup height property here, it's done for you automatically. 您无需在此处设置height属性，它会自动为您完成。

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 个解决方案

解决方案1
2 2013-08-06 18:16:40

解决方案2
2 已采纳

jsFiddle jsFiddle

解决方案3
1 2013-08-06 18:20:16

HTML Body content HTML正文内容

CSS 的CSS

Demo(updated) 演示（更新）

解决方案4
1 2013-08-06 20:07:15

解决方案5
0 2013-08-06 18:23:57

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

问题描述

5 个解决方案

解决方案1 2 2013-08-06 18:16:40

解决方案2 2 已采纳

jsFiddle jsFiddle

解决方案3 1 2013-08-06 18:20:16

HTML Body content HTML正文内容

CSS 的CSS

Demo(updated) 演示（更新）

解决方案4 1 2013-08-06 20:07:15

解决方案5 0 2013-08-06 18:23:57

解决方案1
2 2013-08-06 18:16:40

解决方案2
2 已采纳

解决方案3
1 2013-08-06 18:20:16

解决方案4
1 2013-08-06 20:07:15

解决方案5
0 2013-08-06 18:23:57