1

I was trying to apply a shadow background in a row by using CSS3 property background-size and it worked as excepted in modern browsers accept IE8 below.

Then I got a solution for IE mentioned in this post (make background-size work in IE?)

The above solution also works in IE8 below, but it scales the image proportionally (both horizontally and vertically).

But I need to scale it only horizontally, as I achieved with CSS3 property mentioned below: 

background-size: 100% 25%;

/*
    100% for horizontally
    25% for vertically
*/

My question: Is it any value of sizingMethod which scale the image only either horizontally or vertically (or any other work-around [^ jQuery/Javascript ^]) to get the required result as I got with CSS3 property background-size for modern browsers?

Here is my code that I've used:

CSS:

 .row-shad {
     background:url(../images/cat-bot-shad.png) center bottom no-repeat;

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='http://full-path-to-images/images/cat-bot-shad.png',
    sizingMethod='scale'); /*For IE 8 and less*/

    background-size: 100% 25%; /* for good browsers*/
}

--- Here is the live result, in good browsers and in IE8, see the difference. ---

Any help in this regard should really be appreciated.

Thanks!

Community
  • 1
  • 1
Ahsan Khurshid
  • 9,383
  • 1
  • 33
  • 51

2 Answers2

4

Method 1: fixed background color

If your background has always the same color, you can use an image replacement like this:

example 1

When it's scaled, the proportions will be respected.

Demo (tested and working with IE8)

Method 2: transparent background

If you need a transparent background (using the method above) you'll have to add a multiple filter to solve IE's PNG transparency problems:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='http://full-path-to-images/images/cat-bot-shad-ie.png',
    sizingMethod='scale')
    alpha(opacity = 100); /*For IE 8 and less */

And a conditional commented style to overwrite the original background declaration:

<!--[if lt IE 9 ]> 
<style>
.row-shad { background:none; }
</style>
<![endif]-->

Demo (tested and working with IE8)

By the way, if you use conditional comments in your <html> tag, you can easily target IE8 and below this way:

HTML tag:

<!--[if lt IE 9]> <html class="ielt9"> <![endif]-->
<!--[if !IE]>--> <html> <!--<![endif]-->

CSS:

.ielt9 .row-shad { background:none; }

The IE7 issue

Your method doesn't work on IE7.

You can approach it in a graceful degratadion way, by adding a CSS hack and a custom background image for IE7 (less than 2% users worldwide):

*background:url(../images/cat-bot-shad-ie7.png) center bottom repeat-x;

*property targets IE7 and below only. Or again, you can easily do it with a conditional comment.

Demo (tested and working with IE7-8)

Putting together method 2 and IE7 hack

Eventually, to use both transparent png for IE8 and a custom image for IE7, you've to use multiple conditional comments:

<!--[if IE 8 ]> 
<style>
#row { background:none; }
</style>
<![endif]-->
<!--[if lt IE 8 ]> 
<style>
#row { background:url(../images/cat-bot-shad-ie7.png) center bottom no-repeat; }
</style>
<![endif]-->

Demo (tested and working on IE7-8)

Or again, conditional html tag:

<!--[if lt IE 8]> <html class="ielt8"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if !IE]>--> <html> <!--<![endif]-->

CSS:

.ie8 .row-shad { background:none; }
.ielt8 .row-shad { background:url(../images/cat-bot-shad-ie7.png) center bottom no-repeat; }
Giona
  • 20,734
  • 4
  • 56
  • 68
0

Unfortunately there is no way to make IE 8 and below scale differently than 100%/100%. Which means you need to do this some other way.

One method would be to make the image fit the element.

Since your element is 25% of the element's height, make the image 4x higher and fill the empty space with transparent or the background colour, then change the scale height to 100% instead of 25% for browsers that use the CSS3 property.

background-size: 100%;

Since you're using a PNG which is run-length encoded, this will add an extremely small amount of data to the image, and will work in all browsers just fine.

The only other way to do this is going to be adding a dummy element with 25% height and have it display behind the element's normal content, which is non-semantic and should be avoided when possible.

Nimphious
  • 4,889
  • 1
  • 17
  • 17
  • This is not an issue buddy. The issue is the scaling method in IE8 (that has no concern with `background-size: 100% 25%`) stretches the image vertically as well as horizontally. – Ahsan Khurshid Sep 27 '12 at 06:54
  • That is because the filter is entirely separate from the CSS3 rule that IE does not even read. It doesn't recognize it. The only way to do this in IE is to change the image. – Nimphious Sep 27 '12 at 07:20
  • Yeah i know that, that's why I mentioned in my comment `scaling method in IE8 (that has no concern with background-size: 100% 25%)` – Ahsan Khurshid Sep 27 '12 at 07:48
  • If you look at the documentation for the filter ( http://msdn.microsoft.com/en-us/library/ms532920(v=vs.85).aspx ) you will notice it only takes 3 different values for the scaling rule, and none of them describe your required scaling mode. Which means you need to do it another way. The only way to scale it in IE8 horizontally and not vertically is to use that scaling method and make sure the image is the same height as the element. Is there some reason you don't want to change the image to be the same height? – Nimphious Sep 27 '12 at 07:57
  • I have already seen the documentation you have mentioned. That's why I posted this answer to get a proper workaround. – Ahsan Khurshid Sep 27 '12 at 08:10
  • Your question asks "Is it any value of `sizingMethod` which scale the image only either horizontally or vertically [...]" and the answer to that is no. I cited the documentation which proves this, and I provided a solution that is a viable workaround to this problem. What more do you want? Why is changing the height of the image not a solution for you? If you aren't more specific in your requirements then how can we help you? – Nimphious Sep 27 '12 at 08:13