我正在尝试使用 CSS/HTML 用背景图片填充页面，但它似乎没有像我希望的那样填充页面。如何避免这种情况？
我已经使用下面的源代码做了我能做的最好的事情 - 但我不确定究竟可以做些什么来修复它。
三个主要问题:
背景没有完全填满
左侧的绿色文本与其后的绿色框不对齐。
屏幕顶部的菜单项与其后面的(木纹)图形不对齐。
截图:
来源:
<html>
<head>
<style type="text/css" media="screen" >
</style>
<title>Print</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<IMG STYLE="position:absolute; TOP:15px; LEFT:160px; width="297" height="182" SRC="header-logo.png">
<div style=" background: url(background.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; position:absolute; left:0px; top:0px; width:1280px; height:1024px;">
<a href="index.html" style="cursor:hand">
<div style="position:absolute; left:70px; top:245px; width:62px; height:19px; font-family : Helvetica;
font-size : 25px;
color : #A0CC54;
color : rgb(160, 204, 84);" title="Edible Treasures - Home">Home</div></a>
>
<a href="about.html" style="cursor:hand">
<div style=" position:absolute; left:196px; top:243px; width:65px; height:19px; font-family : Helvetica;
font-size : 25px;
color : #C49A6C;
color : rgb(196, 154, 108);" title="Edible Treasures - About">About</div></a>
<a href="recipes.html" style="cursor:hand">
<div style="position:absolute; left:314px; top:244px; width:78px; height:23px; font-family : Helvetica;
font-size : 25px;
color : #C49A6C;
color : rgb(196, 154, 108);" title="Edible Treasures - Recipes">Recipes
</div></a
><a href="blogs.html" style="cursor:hand">
<div style="position: absolute; left: 467px; top: 243px; width: 56px; height: 24px; font-family : Helvetica;
font-size : 25px;
color : #C49A6C;
color : rgb(196, 154, 108);" title="Edible Treasures - Blogs">Blogs
</div></a>
<a href="contact.html" style="cursor:hand">
<div style=" position:absolute; left:571px; top:244px; width:82px; height:18px; font-family : Helvetica;
font-size : 25px;
color : #C49A6C;
color : rgb(196, 154, 108);" title="Edible Treasures - Contact">Contact
</div></a>
<div style="background-image:url(welcome.png); position:absolute; left:476px; top:357px; width:738px; height:52px;" title="Edible Treasures - Welcome">
</div
><div style=" position:absolute; left:476px; top:458px; width:736px; height:385px; text-align:left; vertical-align:top;
font-family : Baskerville;
font-weight : bold;
font-style : italic;
font-size : 18px;
color : #4C3D38;
color : rgb(76, 61, 56);">We are very fortunate to live in a time when at any time of day or night we can easily walk or drive to the store and have a choice
of different make available on our hands.
With this luxury why would you spend your time growing your own food? I have a good simple answer to that: We are human. As humans, this is what we do. We grow food. This is what we have for thousands of years. It was not until the last hundred or so years that we put the responsibility of making food in the hands of others.<BR>
Who are the people responsible for growing and handling our food? <BR>
And what they are doing to our food? How are they treated? What they are spraying it? Is that good for you? <BR>
Is that good for the earth? Who really knows? They are professionals with <BR>
business interests more in mind than our health. What we do know that if we go to supermarket food is there year-round. <BR>
I am no scientist nor I studied this <BR>
extensively, but mind tells me it can not be good for us or for the land because it does not seem natural or sustainable.<BR>
</B></I></FONT>
</div>
<div style=" background : #A0CC54;
background : rgba(160, 204, 84, 1);
position:absolute; left:82px; top:628px; width:301px; height:213px; text-align:left; vertical-align:top; font-family : Baskerville;
font-size : 18px;
color : #4C3D38;
color : rgb(76, 61, 56); ">Some questions to get you thinking the next time you're in the grocery store buying food:<BR>
</FONT><FONT COLOR=#000000> <BR>
</FONT><FONT COLOR=#4C3C37>Who grow up?<BR>
How is it treated?<BR>
How is the worker who took it considered?<BR>
Do these people have my best interests in mind, or are they just trying to make a higher profit?</FONT>
</div>
<a href="index.html" style="cursor:hand">
<div style=" position:absolute; left:740px; top:995px; width:48px; height:14px; font-family : Helvetica;
font-size : 25px;
color : #C49A6C;
color : rgb(196, 154, 108);" title="">Home
</div></a>
<a href="about.html" style="cursor:hand">
<div style=" position:absolute; left:843px; top:994px; width:49px; height:14px; font-family : Helvetica;
font-size : 25px;
color : #C49A6C;
color : rgb(196, 154, 108);" title="">About </div></a>
<a href="Recipes.html" style="cursor:hand">
<div style="position:absolute; left:941px; top:994px; width:65px; height:17px; font-family : Helvetica;
font-size : 25px;
color : #C49A6C;
color : rgb(196, 154, 108);" title="">Recipes
</div></a>
<a href="blogs.html" style="cursor:hand">
<div style="position:absolute; left:1061px; top:994px; width:45px; height:18px; font-family : Helvetica;
font-size : 25px;
color : #C49A6C;
color : rgb(196, 154, 108);" title="">Blogs
</div></a>
<a href="contact.html" style="cursor:hand">
<div style="position:absolute; left:1153px; top:993px; width:64px; height:15px; font-family : Helvetica;
font-size : 25px;
color : #C49A6C;
color : rgb(196, 154, 108);" title="">Contact
</div>
</a>
</div>
</body>
</html>
最佳答案
回答主要问题:
1 - 将您的主要背景添加到 body，而不是 div。您真的不需要担心图像文件的大小，只需确保压缩 jpeg 文件，它就会很小。
CSS
body {
background: url(background.png) no-repeat top;
}
2 - 移除侧边栏的高度以使绿色框随您的内容调整大小。
我也会使用 CSS reset删除默认浏览器样式并让您拥有干净的状态。
现在，改善你所拥有的...
理想情况下，您应该分离您的 CSS，这是我简化后的页面的基本版本。将其创建为一个新文件并将主体背景指向您的 jpeg :)
调整 nav 的内边距以正确适应背景。
HTML/CSS
<!DOCTYPE html>
<html>
<head>
<title>Print</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* CSS Reset */
html { overflow-x: scroll; }
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
font-family: Helvetica;
}
/* end CSS Reset */
body {
background: url(background.png) no-repeat top;
}
nav {
padding: 100px 0 100px 50px;
}
nav a {
display: inline-block;
padding: 10px; }
#sidebar {
float: left;
width: 200px;
height: 100%;
padding: 10px;
background : rgba(160, 204, 84, 1);
}
#main-content {
float: left;
width: 500px;
padding: 10px;
}
#main-content p {
padding: 0 0 10px;
}
footer {
clear: left;
margin: 0 auto;
width: 440px;
}
</style>
</head>
<body>
<div id="wrap">
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Recipes</a>
<a href="#">Blogs</a>
<a href="#">Contact</a>
</nav>
<div id="sidebar">
Some questions to get you thinking the next time ...
</div>
<div id="main-content"><p>
We are very fortunate to live in a time when at any time of day or night we can easily walk or drive to the store and have a choice
of different make available on our hands.</p>
<p>
With this luxury why would you spend your time growing your own food? I have a good simple answer to that: We are human. As humans, this is what we do. We grow food. This is what we have for thousands of years. It was not until the last hundred or so years that we put the responsibility of making food in the hands of others.</p>
<p>Who are the people responsible for growing and handling our food?
And what they are doing to our food? How are they treated? What they are spraying it? Is that good for you? </p>
<p>
Is that good for the earth? Who really knows? They are professionals with <br>
business interests more in mind than our health. What we do know that if we go to supermarket food is there year-round. </p>
<p>
I am no scientist nor I studied this
extensively, but mind tells me it can not be good for us or for the land because it does not seem natural or sustainable.</p>
</div>
</div>
<footer class="site-footer">
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Recipes</a>
<a href="#">Blogs</a>
<a href="#">Contact</a>
</nav>
</footer>
</body>
</html>
关于HTML/CSS 元素不适合/按需要对齐页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24134328/