为什么背景图片不填满整个div [英] Why the background image does not fill the entire div
本文介绍了为什么背景图片不填满整个div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下代码在 DIV 内显示 SPAN ，然后另一个 DIV 下面显示一些文本。我遇到的问题是当我调整浏览器的大小文本和背景图片得到所有的地方。
I have the following code which displays a SPAN inside a DIV and then another DIV under it which displays some texts. The issue I am having is when I resize the browser the texts and the background image gets all out of place.
这是一个如何图像不填满的屏幕截图 DIV ：
Here is a screenshot of how the image is not filling up the DIV:
此外，当我调整大小时，文字都是不合适的：
Also, when I resize, the text are all out of place:
>
这是HTML：
<div id="subpageHeaderImageSection">
<div id="subpageHeaderLeft">
<!--<img src="theImages/wcu.png" style="z-index: 5; position: absolute; bottom: 0; left: 10%; width: 194px; width: 185px;" />
<span id="quoteText" style="z-index: 4;">
We Have the Finest Physicians, Staff, and Systems for the Finest Healthcare
</span>-->
</div>
</div>
<div id="subpageFooter">
<div id="subpageFooterLeft">
<div style="z-index: 15; position: absolute; left: 0; padding-left: 20px; padding-top: 10px; font-weight: bold; color: #0000CC;">
State-Of-The-Art-Technology
</div>
<div style="z-index: 14; position: absolute; left: 0; padding-left: 40px; padding-top: 35px; padding-right: 8px; font-weight: normal; color: #000000;">
Our state-of-the-art technology ensures that we provide the finest healthcare. Our practice continuously invests in systems and equipment so that physicians can diagnose problems in the most accurate and efficient manner possible.
</div>
<div style="position: absolute; width: 90%; padding-top: 90px; padding-left: 5%; padding-right: 5%;"><hr /></div>
<div style="z-index: 13; position: absolute; left: 0; padding-left: 20px; padding-top: 110px; font-weight: bold; color: #0000CC;">
Advanced Electronic Medical Records
</div>
<div style="z-index: 12; position: absolute; left: 0; padding-left: 40px; padding-top: 135px; padding-right: 8px; font-weight: normal; color: #000000;">
Our advanced electronic medical record improves patient care and gives physicians all of the important patient information they need in one place.
</div>
<div style="position: absolute; width: 90%; padding-top: 175px; padding-left: 5%; padding-right: 5%;"><hr /></div>
<div style="z-index: 11; position: absolute; left: 0; padding-left: 20px; padding-top: 200px; font-weight: bold; color: #0000CC;">
Premier Radiology Services
</div>
<div style="z-index: 10; position: absolute; left: 0; padding-left: 40px; padding-top: 225px; padding-right: 8px; font-weight: normal; color: #000000;">
Filmless radiology capabilities provide rapid results and allow physicians to view images on an office computer screen within minutes. Our premier radiology services include MRI, CT scan, ultrasonography, nuclear medicine, bone densitometry and mammography. We offer computer-aided diagnosis (CAD), which is a tool to assist the radiologist in more accurately diagnosing breast disease.
</div>
<div style="position: absolute; width: 90%; padding-top: 310px; padding-left: 5%; padding-right: 5%;"><hr /></div>
<div style="z-index: 9; position: absolute; left: 0; padding-left: 20px; padding-top: 335px; font-weight: bold; color: #0000CC;">
Our Employees Make MyMed a Special Place
</div>
<div style="z-index: 8; position: absolute; left: 0; padding-left: 40px; padding-top: 360px; padding-right: 8px; font-weight: normal; color: #000000;">
MyMed values each of our employees’ experience, diversity and dedication. Ideas and backgrounds that our employees bring to our company enable us to be more effective in anticipating and exceeding our patients’ needs and expectations. <a class="blueLinks" href="http://www.mymed.com/talented_people.aspx">Click here</a> for the opportunity to meet some of the employees who greatly contribute to our success.
</div>
<div style="position: absolute; width: 90%; padding-top: 430px; padding-left: 5%; padding-right: 5%;"><hr /></div>
<div style="z-index: 7; position: absolute; left: 0; padding-left: 20px; padding-top: 455px; font-weight: bold; color: #0000CC;">
Wide Range Of Insurances
</div>
<div style="z-index: 6; position: absolute; left: 0; padding-left: 40px; padding-top: 480px; padding-right: 8px; font-weight: normal; color: #000000;">
A big advantage to using WESTMED Medical Group is the <a class="blueLinks" href="http://www.mymed.com/participating_insurance.aspx?id=473">wide range of insurance coverage</a> accepted. This means you should be able to keep your doctors even if you find you have to change insurance plans. We care equally about every patient regardless of the insurance provider.
</div>
</div>
<div id="subpageFooterRight">
</div>
</div>
这里是CSS：
#subpageHeaderImageSection {
position: relative;
top: 0;
width: 100%;
height: 450px;
}
#subpageHeaderLeft {
position: absolute;
left: 0;
float: left;
width: 100%;
height: 100%;
background: url('../theImages/subpageHeaderImage.png') no-repeat;
background-size: 100%;
}
#subpageFooter {
position: relative;
width: 100%;
height: 555px;
background: url('../theImages/bg_80_w.png');
box-shadow: 0 0 10px #FFFFFF;
}
#subpageFooterRight {
position: absolute;
right: 0;
width: 40%;
height: 100%;
float: right;
background-color: #000000;
}
#subpageFooterLeft {
position: absolute;
left: 0;
float: left;
width: 60%;
height: 100%;
}
#quoteText {
position: absolute;
bottom: 30%;
left: 40%;
overflow: hidden;
font-family: 'daysregular';
font-size: 30pt;
}
我真的很想帮助两件事：
Two things I would really like help with:
- 如何确保标题上的背景图片始终填充DIV，无论我如何调整大小？
- 我如何
推荐答案
确保文字不会相互重叠，
使用 background-size：100％100％可以完全填满（也许伸展）
其他明智使用 background-size：cover as @Andras说
Use background-size: 100% 100% to fill completely (maybe stretched)
other wise use background-size: cover as @Andras said
这篇关于为什么背景图片不填满整个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
