Solved

css background resizing

Posted on 2011-09-28
5
386 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
The viewer will learn how to dynamically set the form action using jQuery.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

738 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