3 Replies - 967 Views - Last Post: 16 March 2013 - 02:50 PM

#1 siobhanlouise  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 16-March 13

Page cut in half in IE & now background is stretched

Posted 16 March 2013 - 01:55 AM

Hi folks,

I'm having some trouble with my Wordpress.org blog which is driving me nuts! http://feelgoodfilmclub.com

Yesterday I realised that it was completely distorted in IE 7, 8 and 9. Fine in Safari, Firefox & Chrome but in IE, the page was cut in half - scrolling down just revealed a blank page.

I figured it was to do with this bit of code:

	background: url(http://feelgoodfilmclub.com/wp-content/uploads/2013/01/CycleHappy3.jpg) no-repeat center center fixed;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.http://feelgoodfilmclub.com/wp-content/uploads/2013/01/CycleHappy3.jpg', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://feelgoodfilmclub.com/wp-content/uploads/2013/01/CycleHappy3.jpg', sizingMethod='scale')";
	width:100%;
	height:100%;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
margin:0px


So I changed height:100% to min-height:100% and it sort of did the trick.

Now the content is visible in IE but the background stretches (to the extreme) so that the image is completely unidentifiable.

I wonder if anybody has any suggestions? I'd be very grateful!
Siobhan xx

Is This A Good Question/Topic? 0
  • +

Replies To: Page cut in half in IE & now background is stretched

#2 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 167
  • Joined: 12-November 12

Re: Page cut in half in IE & now background is stretched

Posted 16 March 2013 - 10:09 AM

You are setting the background images' size three separate times. The background-size: cover; property is compatible with all browsers so why not just use that instead?
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3332
  • View blog
  • Posts: 11,285
  • Joined: 12-December 12

Re: Page cut in half in IE & now background is stretched

Posted 16 March 2013 - 11:01 AM

View PostFerretHolmes, on 16 March 2013 - 10:09 AM, said:

You are setting the background images' size three separate times. The background-size: cover; property is compatible with all browsers so why not just use that instead?

background-size: cover; is not supported by older browsers caniuse, and the OP has stated that he tests in IE7 and other browsers.

@OP Do you need that filter (twice)?

This post has been edited by andrewsw: 16 March 2013 - 11:02 AM

Was This Post Helpful? 0
  • +
  • -

#4 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 167
  • Joined: 12-November 12

Re: Page cut in half in IE & now background is stretched

Posted 16 March 2013 - 02:50 PM

View Postandrewsw, on 16 March 2013 - 01:01 PM, said:

View PostFerretHolmes, on 16 March 2013 - 10:09 AM, said:

You are setting the background images' size three separate times. The background-size: cover; property is compatible with all browsers so why not just use that instead?

background-size: cover; is not supported by older browsers caniuse, and the OP has stated that he tests in IE7 and other browsers.

@OP Do you need that filter (twice)?


Oops, was in a rush earlier and must have overlooked that small, important detail. Regardless, I still think my solution would make sense, with the addition of modernizr.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1