Heather Ritchey
asked on
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:
And this in the head section of the header file:
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.
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;
}
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]-->
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Give this technique a try:
http://css-tricks.com/3458-perfect-full-page-background-image/
http://css-tricks.com/3458-perfect-full-page-background-image/
ASKER
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.
Thanks for the help.
ASKER
That's what happened on the last javascript resize script also.