Background image not scaling to smaller screen size

I am setting up an HTML site for marketing and have run into a particular annoying problem with one specific background image not scaling to the correct size when viewed with a smaller screen on a mobile device. I have used the same basic code within another page and the result works correctly. But there is something incorrect on this particular page that is causing this image not to scale correctly. Here are code snippets from both the page that works and the page that does not:

Working Page/Background Image
CSS
.full_width { width:100%; display:table; }
.page_wrapper { width:992px; margin:0 auto; display:table; }
.full_width .page_wrapper { border-bottom:1px solid #99d5db; padding-bottom:25px; }
#featured_area { background:url(../images/featured-bg.png) top center no-repeat; }
#featured_area .page_wrapper { height:729px; }
.featured_title { text-align:center; }
.featured_title h1 { font-size:40px; color:#428bca; margin-bottom:0; }
.featured_title p { font-size:22px; color:#494a4b; margin-top:0; }
.featured_content { margin-top: 248px; }

HTML
<div id="featured_area" class="full_width">
    	<div class="page_wrapper">
		<div class="featured_title">
			<h1>Informed Patients Are Better Patients</h1><br>
			<p>Our Healthy Florida is designed to help patients navigate and understand the complex and confusing<br />treatment options available today.</p>
		</div>
            <div class="featured_content">
            	<!--<div class="opt_form">
                <h3>Free! Get Started</h3>
                    <input type="email" name="email" value="Your Email" onblur="if (this.value == '') {this.value = 'Your Email';}" onfocus="if (this.value == 'Your Email') {this.value = '';}"><br />
                    <input type="password" name="password" value="Password" onblur="if (this.value == '') {this.value = 'Password';}" onfocus="if (this.value == 'Password') {this.value = '';}"><br />
                    <input type="submit" value="Sign-up" name="sign-up" />
                    <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh  </span>
                </div>-->
                <!--<img src="images/apple.png" class="apple" alt="Apple"/>-->
            </div>
        </div>
    </div>

Open in new window


Broken Page/Background Image
CSS
.full_width { width:100%; display:table; }
.page_wrapper { width:992px; margin:0 auto; display:table; }
.full_width .page_wrapper { border-bottom:1px solid #99d5db; padding-bottom:25px; }
#contact_area { background:url(../images/contact.png) top center no-repeat; max-width:100%; }
#contact_area .page_wrapper { height:818px; }
.contact_title h4 { font-size:30px; color:#428bca; margin-bottom:0; text-align:left; }
.contact_title p { font-size:17px; color:#494a4b; margin-top:0; line-height:1.5; text-align:left; }
.contact_post p { font-size:17px; color:#494a4b; margin-top:0; line-height:1.5; text-align:right; }

HTML
    <div id="contact_area" class="full_width">
	<div class="page_wrapper">
		<div class="contact_title">
			<h4>Contact <font color="#47a447">Our</font> Healthy Florida</h4><br>
			<p>Do you have questions or would you like more information about our program?<br>
			Please contact the appropriate department listed below and we will be glad to assist you further.</p><br>
		</div>
		<div class="contact_post">
			<p>Customer Support<br><a href="mailto:support@ohfla.org?Subject=Our Healthy Florida Support Needed" target="_top">support@ohfla.org</a></p><br>
			<p>New Program Inquiries<br><a href="mailto:inquiries@ohfla.org?Subject=Our Healthy Florida New Program Inquiry" target="_top">inquiries@ohfla.org</a></p><br>
			<p class="contact_padding">CSI Health Privacy Office<br><a href="mailto:privacyoffice@csihealthllc.com?Subject=CSI Health Privacy Question" target="_top">privacyoffice@csihealthllc.com</a></p>
		</div>
	</div>
    </div>

Open in new window


I have looked at this a thousand times but cannot find my error. Is it in my CSS/Code or is it possible the image file? I am using PNG image files for both backgrounds but could I have possibly not set one up correctly?
gactoAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Tom BeckConnect With a Mentor Commented:
You have the background image in a div that is width:100%. Using background-size:contain, the bg image will expand until the height or width of the image meet any edge of the bounding box, then stop expanding. "contain" will never change the original aspect ratio of the image like "cover" does. The page_wrapper has a height:992px so that's where the bg image stops expanding. To get that bg image to stop expanding when it reaches your 992px content area, you need to have it as the bg image of a container that is 992px wide, not 100%. Why not have it as the bg image on page_wrapper rather than the #contact_area, full-width div? The image on the home page is behaving the same way except that it has edges that fade to transparent so it's less noticeable.
0
 
gactoAuthor Commented:
One point that I omitted from the CSS for the broken page, I added "max-width:100%" as a test to see if that may be a quick fix. In reality I did not expect that to work and it did not do me any good.
0
 
Tom BeckCommented:
You can use background-size:contain like this:

#featured_area { background:url(../images/featured-bg.png) top center no-repeat; background-size:contain }

However, the minimum size will be limited by the width set for .page_wrapper and the maximum size by the height set for .page_wrapper.
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
gactoAuthor Commented:
Tom Beck,

#featured_area was the section of CSS and code that was scaling properly. #contact_area is the one that is not scaling properly.
0
 
Tom BeckCommented:
The background image did not scale in either of those examples in my testing. I don't see how they could.
0
 
gactoAuthor Commented:
http://www.ourhealthyflorida.org/

The code for #featured_area is running on the home page for the site above. If you run this site on pc or mobile you will see that the background image resizes and even disappears when your mobile screen size gets small enough.

#contact_area is a change I am currently implementing and is not currently posted.
0
 
Tom BeckCommented:
The background image on that page is not scaling down when the browser window is reduced in size. There's some cropping happening because the background image is set to top center so it remains centered when the containing div goes below the image width. Cropping is not the same as scaling. When the browser window gets below 539px in width, this media query definition takes over and the background image disappears.

#featured_area {
    background: none repeat scroll 0 0 #fff;
}
0
 
gactoAuthor Commented:
The image disappears on purpose because of the bleed over from the text to the image when the screen size gets to, or below, 539px. That is completely accurate. If my description of scaling vs cropping is inaccurate that is another issue that I will deal with separately.

But my question is, given the code snippets I posted, why isn't the background image in #contact_area responding the same way to screen resizing as the background image in #featured_area?
0
 
Tom BeckCommented:
The image would not necessarily need to disappear. The css could be defined to scale the image and move it down so it's clear of the text. But that's another issue as you pointed out.

In the #contact_area, the max-width:100% overrides the width:992px set in .page_wrapper causing the div to go full width. Otherwise, the background image is cropping the same way as in example one. Max-width:100% only affects the div. It has no effect on the background image.
0
 
gactoAuthor Commented:
#contact_area { background:url(../images/contact.png) top center no-repeat; }

This is the the current CSS entry for contact_area and I am getting the same result. The image is not cropping on the screen resize. I only tried max-width hoping I would get lucky but, as you pointed out, it did me no good.
0
 
Tom BeckCommented:
When I copy both examples to a page, remove the max-width:100%, both examples behave the same. In my tests, both background images have the same native resolutions. If they do not, they could appear to behave differently.
0
 
gactoAuthor Commented:
Ok I need to check the images and see if that is my problem. I will also post some screen shots of the dev site so you can see how the image is rendering.
0
 
gactoAuthor Commented:
Ok here are screenshots from both examples in the dev environment. Maybe my entire problem is cropping?
image.jpg
image.jpg
image.jpg
image.jpg
0
 
Tom BeckCommented:
Looks exactly right to me. The image is being cropped the by same amount on the left and right (referring to the nurse, blue background). It's more difficult to see the cropping on the other image because it's narrower, the subjects are centered and the edges fade to white.

Have you tried background-size:contain yet?
0
 
gactoAuthor Commented:
That is my next step. I will push that code in the morning and post my results.
0
 
gactoAuthor Commented:
Ok I have included background-size:contain which produces results for both #featured_area and #contact_area that scale. But my contact_area background image is still not sizing correctly. I have attached a screenshot to show the result but it is similar to what I had as a problem before. The background image in contact_area is larger than the value I have defined in page_wrapper. That width is set to 992px, but the background image (in full screen) is rendering at basically 1180px. I even have the image filed saved with a width of 992px.

Tom Beck - you have been a great help so far. If you believe this is a separate topic altogether I will accept your solution here and start this as another thread. It doesn't matter to me.
Contact-AreaFullSize.PNG
contact.png
style.css
0
 
Tom BeckCommented:
This would be easy if you had a live link.

The 992px width of page_wrapper can be overridden by a media query for example.

You need to study the page using the developer tools in the browser to see how the background image and its parent container are being interpreted at various screen widths.

If you have resized the image down to 992px width, remember to clear the cache of the browser you are testing in to eliminate the possibility of loading an older version of the image.
0
 
gactoAuthor Commented:
I put this on a test server this morning to have a team collaboration. You can see it on the web at http://ohfla.mymdorder.com/home.html

username: test
password: testuser

I am running checks with the developer tools now to see what I can figure out.
0
 
gactoAuthor Commented:
because i am using class="full_width" in the div id for both featured_area and contact_area...is that right?
0
 
Tom BeckCommented:
That's fine. You need the full width container in order to center the fixed width content.

What I'm saying is move the background image to the page_wrapper div instead of the full_width div. That will keep the background image from expanding wider than the content.
0
 
gactoAuthor Commented:
Ok I got it. Let me make those changes and push to test.
0
 
gactoAuthor Commented:
Yep it was that easy. Moved the image to page_wrapper and it works as expected.

Tom Beck thanks for the help.
0
 
gactoAuthor Commented:
Tom did an outstanding job troubleshooting my problem. It was not the problem I thought I had originally so Tom actually solved more than one issue for me.
0
 
Tom BeckCommented:
You're welcome. Thanks for the points.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.