為什么背景圖片無法填充整個div

Question

我有以下代碼，該代碼在DIV內顯示一個SPAN ，然后在其下顯示另一個文本的另一個DIV 。 我遇到的問題是，當我調整瀏覽器的大小時，文本和背景圖像變得不完整。

這是圖像如何未填充DIV的屏幕截圖：

另外，當我調整大小時，文本都不合適了：

這是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;
}

我真的希望提供兩點幫助：

1. 無論我如何調整大小，如何確保標題上的背景圖像始終充滿DIV？
2. 如何確保文本不會像第二個圖像那樣彼此重疊？

Answer 1

使用background-size:cover ，它將填充。

Answer 2

使用background-size: 100% 100%完全填充（可能會拉伸），否則，請使用background-size: cover如@Andras所說