Solved

css background resizing

Posted on 2011-09-28
5
384 Views
Last Modified: 2012-05-12
I'm having a problem with the auto-resizing css for this site:
http://dummyhoythemovie.com/
being compatible in all browsers.

IE8 is what I'm having trouble with. Not sure below IE8 because that's the oldest one I have available. It's correct in FF, Chrome, and IE9.

This is the css I have that pertains to it:
 
body {
	background: #000 url(http://dummyhoythemovie.com/wp-content/themes/AdventurePlus/images/bg/bg3.jpg) center center fixed no-repeat;
	-o-background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	background-size: cover;
	font-size:13px;
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
	font-family: sans-serif;
}

Open in new window


And this in the head section of the header file:
 
<!--[if lte IE 8]>
<style type="text/css">
body {
position:relative;  width:100%; height:100%;
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://dummyhoythemovie.com/wp-content/themes/AdventurePlus/images/bg/bg3.jpg', sizingMethod='scale')";
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://dummyhoythemovie.com/wp-content/themes/AdventurePlus/images/bg/bg3.jpg', sizingMethod='scale');
}
</style>
<![endif]-->

Open in new window


If you view in a browser that's working and then in IE8, you can see more clearly how the background isn't working the same. And also, if you resize your browser to different heights and widths, you can see how the image is suppose to auto-adjust as if it's resizing to the height and width of the window.

Any advice or help with this would be greatly appreciated.
0
Comment
Question by:Dzynit
  • 2
  • 2
5 Comments
 
LVL 30

Accepted Solution

by:
LZ1 earned 250 total points
ID: 36719781
Can you not use Javascript? Why a pure CSS based solution?  Only reason I'm asking is that anything less than CSS 3 can't detect the browser width/height. IE 8 does not support all of CSS 3, including the media-query function.

I've used this: http://www.ajaxblender.com/bgstretcher-jquery-stretch-background-plugin.html 
and I've had success with it.  
0
 
LVL 18

Assisted Solution

by:Rartemass
Rartemass earned 250 total points
ID: 36812713
Just a point on your testing of IE versions, you can download IETester to view the page from IE 5.5 up to IE 9.
http://www.my-debugbar.com/wiki/IETester/HomePage

Other than that I agree with LZ1 and would use the scripted suggestion.
While I would love to use pure CSS styling, some browsers (like IE) make it impossible for certain things. I don't like using the other technologies. I refuse to use flash and silverlight in web design which only really leaves javascript and jquery.
0
 
LVL 14

Author Comment

by:Dzynit
ID: 36816077
I tried LZ1's suggestion, but the image didn't stretch the full width of the screen regardless of the options chosen. It only display in a square format about half the browser width.

That's what happened on the last javascript resize script also.
0
 
LVL 18

Expert Comment

by:Rartemass
ID: 36818716
0
 
LVL 14

Author Closing Comment

by:Dzynit
ID: 36892142
Both your answers were helpful to me. Neither solved the problem for me on this particular project, but there must have been another issue causing a conflict keeping anything from working.

Thanks for the help.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Receipt Printer for web based app 3 64
The Best Website Creation Tools 14 53
Make Line Items Look Good Over Mobile 2 52
ajaxSubmit is giving me an error 1 34
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

816 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

8 Experts available now in Live!

Get 1:1 Help Now