Solved

css background resizing

Posted on 2011-09-28
5
387 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

What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

Question has a verified solution.

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

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

707 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