Question

当我在CSS中实现背景时，它覆盖了整个页面，但长度不够大，无法涵盖我想在其中编写的内容。我研究并发现了一个背景重复y，我认为它会再次复制背景，使页面更长。当我编码background-repeat：y; } 进入CSS，它给了我想要的长度，但是分割背景使它不覆盖整个页面。大多数都是白色的。我究竟做错了什么？感谢。

HTML：

<!DOCTYPE html>
<html>
<head>

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="aboutme.css">
<title>It's all about me!</title>
</head>
<body>
<div id="content">
<header>
<div class="grow">
<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="aboutme.html">About me</a></li>
  <li><a href="like.html">What I love</a></li>
</ul>
</div>
</header>
<h1>About Me</h1>
<img src="ben.jpg" id="ben">
<b><h2>The beginning of coding:</h2></b>
<img src="runescape.jpg">
</div>
<p></p>
</body>
</html>

CSS：

body {
    background-image: url(halftone.png);
    background-repeat: repeat-y;
    width: 1000px;
    height: 4000px;

}
h1 { font-family: 'Lobster', cursive;

    color: black;
    position: absolute;
    top: 25px;
    left: 540px;
    text-decoration: underline;

}

h2 {font-family: 'lobster', cursive;
    color: black;
    position: absolute;
    top: 540px;
    left: 480px;
    text-decoration: underline;

}
p { font-family: 'Lobster', cursive;
    font-size: 20px;
    color: white;
    position: absolute;
    top: 300px;
    left: 320px;
    display: 0px auto;
}

#runescape {
    position: absolute;
    top: 500px;
}
#pagesize {
    max-height: 10000px;
}

#ben {
    position: absolute;
    top: 130px;
    left: 290px;
    width: 700px;
    height: 400px;

}
.grow {
    position: absolute;
    left: 550px;
    top: 700px;
}


a {
    color: black;
    text-decoration: none;
    font-weight: bold;
}
ul {
    padding: 10px;
    background: #dcf3ff;
    border-width: 6px;
    border-style: solid;
    border-color: white;

}

li {
    display: inline;
    padding: 0px 15px 0px 15px;
    border-right: 2px solid black;
    border-left: 2px solid black;

}

#cameron {
    position: absolute;
    top: 285px;
    left: 220px;
}

#pastcoding {
    position: absolute;
    top: 100px;
}

.grow {
  display: inline-block;
  -webkit-transition-duration: 0.7s;
  transition-duration: 0.7s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.grow:hover {
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
}

Answer 1

尝试background-size:cover;到body

Answer 2

是的background-size:cover;是一个足够的选择。但可能没有像预期的那样完全查看您的图像。完成任务的最佳选择是图像应根据您的体型重新调整大小，并在您的体型中使用background-size: (width)px (height)px;。但这仅适用于固定尺寸的车身。除非它不会变得漂亮。： - ）

Answer 3

在css中尝试使用background-repeat: repeat;和min-height: 1080px;并根据需要更改1080px。

当我使用background repeat-y时，背景会分裂并且不会覆盖整个页面

3 个答案: