Question

我已经尝试过css和html，但两者都没有产生预期的结果。我的背景图片长2000像素，宽810像素。

HTML

<body>
<img src="http://i1162.photobucket.com/albums/q535/SachithPerera1/Fiverr%20-        %20Living%20Thin%20Philadelphia/bg_zpse26c2157.png" class="bgpic" />
</body>

CSS

 body
 {
 margin: 0;
 padding: 0;
 width: 810px;
 height: 2500px;
 }

 .bgpic
 {
 width: 100%;
 height: 100%;
 }

Answer 1

您的HTML有点偏差。你没有设置正文的背景属性;你只是将图像放在页面的主体上。你想要摆脱<img>元素并修改你的身体css是这样的：

body { 
  background-image: url("http://i1162.photobucket.com/albums/q535/SachithPerera1/Fiverr%20-%20Living%20Thin%20Philadelphia/bg_zpse26c2157.png");
  background-size: 100%;
}

Answer 2

你会想要使用background-size:cover;来调整你的CSS。像下面这样的东西应该运作良好：

body {
  margin: 0;
  padding: 0;
  width: 810px;
  height: 2500px;
  background-image: url("image.url.here");
  background-size: cover;
}

在此之后，从您的HTML中移除<img>标记，从CSS中移除.bgpic，您就可以开始了！

background-size:cover;可确保您的图像始终填充该区域，在本例中为810px×2500px，并保持其纵横比。

Answer 3

请使用CSS上的background属性来定位背景。

body {
    background: url("http://i1162.photobucket.com/albums/q535/SachithPerera1/Fiverr%20-%20Living%20Thin%20Philadelphia/bg_zpse26c2157.png") no-repeat top left; 
    margin: 0;
    padding: 0;
    width: 810px;
    height: 2500px;
}

HTML中长图像的背景代码不会产生预期的结果

3 个答案: