Solved

Background image not scaling to smaller screen size

Posted on 2015-01-14
24
195 Views
Last Modified: 2015-01-15
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?
0
Comment
Question by:gacto
  • 14
  • 10
24 Comments
 

Author Comment

by:gacto
ID: 40550245
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40550429
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
 

Author Comment

by:gacto
ID: 40550435
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40550440
The background image did not scale in either of those examples in my testing. I don't see how they could.
0
 

Author Comment

by:gacto
ID: 40550444
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40550455
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
 

Author Comment

by:gacto
ID: 40550464
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40550485
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
 

Author Comment

by:gacto
ID: 40550488
#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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40550489
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
 

Author Comment

by:gacto
ID: 40550491
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
 

Author Comment

by:gacto
ID: 40550498
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 38

Expert Comment

by:Tom Beck
ID: 40550505
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
 

Author Comment

by:gacto
ID: 40550508
That is my next step. I will push that code in the morning and post my results.
0
 

Author Comment

by:gacto
ID: 40551470
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40551673
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
 

Author Comment

by:gacto
ID: 40551814
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
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 40551962
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
 

Author Comment

by:gacto
ID: 40552095
because i am using class="full_width" in the div id for both featured_area and contact_area...is that right?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40552107
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
 

Author Comment

by:gacto
ID: 40552115
Ok I got it. Let me make those changes and push to test.
0
 

Author Comment

by:gacto
ID: 40552175
Yep it was that easy. Moved the image to page_wrapper and it works as expected.

Tom Beck thanks for the help.
0
 

Author Closing Comment

by:gacto
ID: 40552179
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40552195
You're welcome. Thanks for the points.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now