Home/ Questions/Q 8614019
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T05:01:20+00:00

I was trying to apply a shadow background in a row by using CSS3

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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; }
    • 0