图像未完整显示在身体背景上
完整图像：http://i53.tinypic.com/347a8uu.jpg
正如你所看到的，我有一个body 带有标题的偏移量，正文具有图像背景。然而，该图像并未完整显示。
问题： 我可以使用 CSS 做一些事情来显示整个图像，还是需要使用 Gimp 或 Photoshop 来缩小图像。目前它是 1400 x 1050 像素。
Example: http://jsbin.com/opokev/20
Full image: http://i53.tinypic.com/347a8uu.jpg
As you can see, I have a body with an offset for the header and the body has an image background. However, the image is not being show in full.
Question:
Can I do something with CSS so that the whole image is shown or do I need to use Gimp or photoshop to scale down my image. Currently it is 1400 x 1050 pixels.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
我认为您正在尝试使图像适合窗口，即使这意味着图像扭曲。
您可以使用已使用的
background-size属性来实现此目的。但您将其设置为100% 100%，而不是cover。实例：http://jsbin.com/opokev/21/I think you are trying to make the image fit the window even if that means the image is distorted.
You can achieve this with
background-sizeproperty you have already used. But instead ofcoveryou set it to100% 100%. Live example: http://jsbin.com/opokev/21/CSS2 现在允许您缩放背景图像。您可以使用媒体查询并根据用户的分辨率呈现不同的图像。
顺便说一句：URL 参数不需要引号：
CSS2 does now allow you to scale background images. You can use a media query through and present a different image, based on the user's resolution.
BTW: Quotes are not required for URL parameters:
在您的示例中，根本没有显示图像。我怀疑这是因为您正在使用 postimage.org 来托管图像，并且它们阻止了来自外部域的图像请求（您的示例）。如果我将 URL 替换为我自己的服务器上托管的图像，则图像背景将使用您设置的属性显示。我建议使用不同的图像主机。
您使用的 CSS3
background-size: cover;属性将根据水平宽度按比例缩放图像以填充浏览器。不需要事先缩放图像，尽管这可能并不总能给出最漂亮的结果。In your example, the image is not being shown at all. I suspect this is because you are using postimage.org to host the image, and they are blocking the image request from an external domain (your example). If I substitute the URL for an image hosted on my own server, the image background is displayed using the attributes you have set. I would suggest using a different image host.
The CSS3
background-size: cover;attribute that you are using will scale the image proportionally to fill the browser, based on the horizontal width. There should be no need to scale the image beforehand, although this may not always give you the prettiest result.是的，您可以使用 HTML 和 CSS 做一些技巧，但您的图像必须位于标签中：
CSS:
HTML:
Check jsbin: http://jsbin.com/izenah/edit#javascript,html
Yes you can do some trick using HTML and CSS, but your image must to be in tag:
CSS:
HTML:
Check jsbin: http://jsbin.com/izenah/edit#javascript,html