当我使用背景重复-y时，背景会分裂并且不会覆盖整个页面
[英]When I use background repeat-y, the background splits and doesn't cover the whole page
问题描述
When I implemented the background in CSS, it covered the whole page but the length wasn't big enough to cover the content I wanted to write in it. 
当我在CSS中实现背景时，它覆盖了整个页面，但长度不足以覆盖我要在其中编写的内容。 I researched and found a background repeat-y, which I thought would copy the background again, making the page longer. 我研究后发现背景重复号-y，我认为它将再次复制背景，从而使页面更长。 When I code background-repeat: y; 当我编写背景重复代码时：y; } into CSS, it gives me the length I wanted, but splits the background so it doesn't cover the whole page. }转换为CSS，它可以提供所需的长度，但是会分割背景，因此不会覆盖整个页面。 Most of it is white. 大部分是白色的。 What am I doing wrong? 我究竟做错了什么？ Thanks. 谢谢。
HTML: 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: 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);
}
3 个解决方案
解决方案1
0 2014-08-12 15:04:38
Try background-size:cover; 尝试background-size:cover; to your body 对你的body
解决方案2
0 2014-08-12 15:21:48
Yeah background-size:cover; 是的background-size:cover; is a enough option. 是一个足够的选择。 But may be it doesn't view your image completely as expected. 但是可能它无法完全按照预期查看图像。 Best option to accomplish your task is that the image should re-size proportional to your body size and use background-size: (width)px (height)px; 完成任务的最佳选择是图像的大小应与您的身体大小成比例，并使用background-size: (width)px (height)px; in your body styling. 在你的身体造型上。 But this is only applicable to fixed size body. 但这仅适用于固定大小的主体。 Unless it won't be pretty. 除非那不会漂亮。 :-) :-)
解决方案3
0 2014-08-12 16:16:00
Try background-repeat: repeat; 尝试background-repeat: repeat; and min-height: 1080px; 和min-height: 1080px; to body in css and change 1080px to as required to you. 在CSS中1080px为，并根据需要将1080px更改为。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.