Question

这不是重复的，我查看了类似的问题并尝试了他们的解决方案，但没有任何效果。我的一半图像一直被切断，其他解决方案只是集中在它上面，但它并没有像我想要的那样在没有被扭曲的情况下跨越页面，对于什么是错误的任何想法？

HTML

<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="mainPage.css"/>
</head>
<body>

<div id="header">


 </div>

 <div id="body">

 </div>

 <div id="footer">

 </div>

 </body>
 </html>

CSS

body{width: 100%;
    margin:0px;
    padding:0px;
      }




#header{
    height:2300px;
    background-color:pink;
    background-image: url("http://horoscopespot.net/wp-  content/gallery/pisces/pisces-shadow.jpg");
    background-repeat: no-repeat;
    background-size:cover;

    }

Answer 1

添加margin-bottom:10px;或padding-bottom:10px;

此外，background-size: 100% 100%可以提供帮助。

Answer 2

这应该有效：

background-size: cover;

将此添加到您的css。

Answer 3

在body标签中使用

body
{
    background: url(http://horoscopespot.net/wp-content/gallery/pisces/pisces-shadow.jpg) no-repeat fixed top center;
}

我的背景图像在底部被切断了？

3 个答案: