图片未全部显示在身体背景上 [英] Image is not displaying in full on a body background

问题描述

示例： http://jsbin.com/opokev/20

全图： http://i53.tinypic.com/347a8uu.jpg

正如你所看到的，我有一个 body 图像背景。但是，图像未完全显示。

问题：
我可以使用CSS做一些事情，以便显示整个图像，或者我需要使用Gimp或photoshop缩小我的图像。目前它是1400 x 1050像素。

解决方案

我想你试图使图像适合窗口，即使这意味着图像失真。

您可以使用已经使用的 background-size 属性来实现此目的。但不是 cover ，而是将其设置为 100％100％。实例： http://jsbin.com/opokev/21/

  body {
 background：url（http://i53.tinypic.com/347a8uu.jpg）no-repeat center fixed; 
 background-position：0px 85px; 
 -webkit-background-size：100％100％; 
 -moz-background-size：100％100％; 
 -o-background-size：100％100％; 
 background-size：100％100％; 
} 
  

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.

解决方案

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-size property you have already used. But instead of cover you set it to 100% 100%. Live example: http://jsbin.com/opokev/21/

body {
    background: url(http://i53.tinypic.com/347a8uu.jpg) no-repeat center fixed;
    background-position: 0px 85px;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
}

这篇关于图片未全部显示在身体背景上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！