[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 398
  • Last Modified:

css background resizing

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
Dzynit
Asked:
Dzynit
  • 2
  • 2
2 Solutions
 
LZ1Commented:
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
 
RartemassAuthor, martial arts coach, IT ConsultantCommented:
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
 
DzynitAuthor Commented:
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
 
RartemassAuthor, martial arts coach, IT ConsultantCommented:
0
 
DzynitAuthor Commented:
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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now