0

I am working on a real basic design as a side-project for my company, however am unable to get the background-size to do anything meaningful (or find any alternative that preserves the functionality it currently has). I have been working on this specific problem for around an hour and half now, any help would be appreciated.

The site I am working on can be found at http://code.msap.com/gflyer/flyer1.html

its important to note that I cannot modify anything before or after the container div. I also am not able to use javascript, and all CSS must be done in-line.

Is anyone able to steer me in the proper direction here?

NRGdallas
  • 395
  • 1
  • 8
  • 20
  • what exactly are you after with the background-size? – Danield Nov 29 '12 at 22:16
  • I guess I should have noted that - when you open the page in IE, the blue background does not scale properly at all - I need the actual logo to automatically resize as the page resizes and the background behind as well - maintaining the div above's height, however scaling themselves in both height and width – NRGdallas Nov 29 '12 at 22:24
  • IE8 does not support CSS `background-size`. – Spudley Nov 29 '12 at 22:27
  • I am aware it does not support background-size - the problem remains that every workaround I have read as of yet does not work. – NRGdallas Nov 29 '12 at 22:30
  • Have you tried the answer from this question? http://stackoverflow.com/questions/2991623/make-background-size-work-in-ie. Besides that I don't think there is a way to resize the background image unless you re write the HTML or use javascript. – sarcastyx Nov 29 '12 at 23:37
  • I have tried that, however could not get it to work (either from my own ineptitude or that it just doesn't work on IE8/9) – NRGdallas Nov 29 '12 at 23:59
  • 1
    @NRGdallas, can you show us what you have tried and maybe then we can tell you where you have gone wrong? – sarcastyx Nov 30 '12 at 01:07
  • I have tried the filter method, and have tried various ways of redoing the HTML – NRGdallas Nov 30 '12 at 18:32

2 Answers2

1

IE8 does not support CSS background-size.

Your only solutions are:

  1. ignore it; IE8 users will just have to upgrade.

  2. use a Javascript polyfill to emulate the background-size property in IE8 and earlier.

  3. Rewrite your HTML so that the background image is in its own <img> tag, which is sized appropriately and layered behind the element so that it looks like a background image.

  4. use the Chrome-Frame plugin, which makes IE use the Chrome rendering engine. (your users would have to install the plugin for themselves though)

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • 1
    1-Cannot ignore IE Users 2-Cannot use Javascript, as stated 3-Every attempt to rewrite the HTML and maintain the stretching functionality has not worked, either the logo is no longer stretched along the base of the background, or oen or the other does not stretch properly, or it doesn't work in IE 4-no control over the users browser – NRGdallas Nov 29 '12 at 22:34
1

I have created a background-size polyfill for IE8 that is really simple to use:

.selector { 
    background-size: cover;
    -ms-behavior: url(/backgroundsize.min.htc);
}
Louis-Rémi
  • 1,768
  • 1
  • 13
  • 14