Why the background image does not fill the entire div

Question

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.

Here is a screenshot of how the image is not filling up the DIV:

enter image description here

Also, when I resize, the text are all out of place:

enter image description here

Here is the HTML:


    
        
    


    
        
            State-Of-The-Art-Technology
        
        
            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.
        
        
        
            Advanced Electronic Medical Records
        
        
            Our advanced electronic medical record improves patient care and gives physicians all of the important patient information they need in one place.
        
        
        
            Premier Radiology Services
        
        
            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.
        
        
        
            Our Employees Make MyMed a Special Place
        
        
            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. Click here for the opportunity to meet some of the employees who greatly contribute to our success.
        
        
        
            Wide Range Of Insurances
        
        
            A big advantage to using WESTMED Medical Group is the wide range of insurance coverage 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.

Here is the 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:

How can I ensure the background image on the header always fills up the DIV no matter how I resize?
How can I ensure the text doesn't come on top of each other like it's doing in the second image?

rsudip90 · Accepted Answer

Use background-size: 100% 100% to fill completely (maybe stretched) other wise use background-size: cover as @Andras said

Why the background image does not fill the entire div

Answers (2)

Related Questions