CSS3背景大小 - 我可以保证覆盖吗？ [英] CSS3 background-size - can I guarantee coverage?
问题描述
我有一个网站使用图片作为整个网页的背景。为了做到这一点，我使用新的CSS3规范background-size，它设置为覆盖。
I have a website that uses an image as its background over the entire page. In order to do this, I am using the new CSS3 spec "background-size", which is set to "cover".
background-image: url(/images/House-Remodel-Ideas2.jpg);
background-repeat: no-repeat;
background-size: cover;
一般来说这种方法很好，但我注意到如果窗口开始变得太窄一个相当宽的图像，所以即使1024x768是太窄），然后图像停止填充页面，而我看到的页面的背景颜色。
Generally speaking this works well, but I noticed that if the window starts to get too narrow (and this a fairly wide image, so even 1024x768 is "too narrow") then the image stop filling the page and instead I see the background color of the page.
这种方式破坏了网页的外观。虽然我想我可以创造性的图像的大小和页面的整体设计，这将是很好，如果这个工作按预期。对于图片溢出或被剪辑，我可以，但是我不能确定它太小，并留下页面背景显示。
This kind of destroys the look of the page. While I suppose I can get creative about both the size of the image and the overall design of the page, it would be nice if this worked as expected. I'm OK with the image spilling over or getting clipped, but I'm not OK with it being too small and leaving the page background showing.
请求一个示例，所以...这里是我使用的映像：
http://i.imgur.com/igLMC.jpg
An example was requested, so... here is the image I'm using: http://i.imgur.com/igLMC.jpg
这里是HTML：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-image: url(house.jpg);
background-size: cover;
background-repeat: no-repeat;
background-color: red;
}
</style>
</head>
<body>
</body>
</html>
我在图像后面放了一个讨厌的红色背景来演示问题。如果它工作正常，你不应该看到红色。所以运行上面的，然后调整浏览器的大小，使其非常瘦，高。你会看到很多的红色下面的图片。这是问题。
I put an obnoxious red background behind the image to demonstrate the problem. If it is working properly, you should NOT see the red. So run the above, and then resize the browser so that it is very thin, and tall. You will see lots of red under the picture. THAT's the problem.
作为更新，在更多的测试，删除DOCTYPE似乎解决这个问题。我不够聪明，不能告诉你为什么。 ：）
As an update, upon more testing, removing the DOCTYPE seems to fix the problem. I am not smart enough to tell you why. :)
推荐答案
我没有实现一个css方式来做到这一点，但我确实使用backstretch jQuery插件一次，它的工作全面。 http://srobbin.com/blog/easy-full- screen-background-images-with-jquery /
I haven't implemented a css-only way to do this, but I did use the backstretch jQuery plugin once, and it worked across the board. http://srobbin.com/blog/easy-full-screen-background-images-with-jquery/
这篇关于CSS3背景大小 - 我可以保证覆盖吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
