Solved

css background resizing

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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
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.

828 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