Click here to Skip to main content
15,867,330 members
Please Sign up or sign in to vote.
5.00/5 (1 vote)
See more:
Hai,
i have a problem with design for all browser,my design is work in ie9,mozila and chrome but IE8 not work.
my problem is i have a png image dimensions is 234x71 (i.e 234px width and 71px height)this image is use as background of table td tag,if screen resolution is 1440x900 it works fine, but if screen resolution is increased (i.e screen width is increased the image not fit on table td tag fully,it give some white space on leftside).
if i use
CSS
background-size:100% 71px;
it will work on ie9+,mozila and chrome,but IE8 not work,i want only increase the width of image based on
width (i give 14% for td width it will fix image if screen width 1440x900),pls reply me how to stretch image in IE8 also.

NOTE: i use background for td in html table,i am not use any image control
Regards
Aravind
Posted
Updated 3-Jun-13 17:53pm
v3

background-size is a CSS3 property. Unfortunately, It is only supported in IE9+. Before CSS3, the background image size was determined by the actual size of the image.

The fix:
IE specific hack...


  • Lets say in html you have:
    HTML
    <table id="main">
        <tr>
            <td id="bg">
                some content
            </td>
        </tr>
    </table>
    

  • Create two stylesheets, one for CSS3 compatible (main) stylesheet and one for IE8 and lower browsers.
    In CSS3 stylesheet
    CSS
    #bg {
         background:url(someimage.gif);
         background-size:100% 71px;
    }


    IE8 fix in another stylesheet named ie.css
    CSS
    #bg {
         background: no-repeat center center fixed;
         filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='someimage.gif', sizingMethod='scale');
    }

  • Add the css to your html, ie8 css using a conditional statement.
    In <HEAD> add the following
    HTML
    <!--[if lte IE 8]>
    	<link rel="stylesheet" type="text/css" href="ie8.css" />
    <![endif]-->




Implementation Note:
This filter scales the entire image to fit in the allocated area. If your td is greater that 71px in height, this may cause issues.

Good Luck!
 
Share this answer
 
v3
Comments
Aravindba 4-Jun-13 2:45am    
how to give image url in background: url(WebSiteDesign.jpg) and src='WebSiteDesign' ?
i have image in C:\inetpub\wwwroot\aravind\images, aravind is my website folder in wwroot and images are available in 'images' folder,pls tell me how to give url for image in 2 places in ur code.is it enough only image name with extension ? or need to give full path ? aravind is website folder and available in iis .if other than ie whether it call image or need to give image in td tag ?
Thanx
AlphaDeltaTheta 4-Jun-13 4:21am    
in src parameter, you can change the url to suite yours
AlphaDeltaTheta 4-Jun-13 4:22am    
No, you have to replace 'someimage.gif' with your image, a relative path is enough. Such as /images/WebsiteDesign.jpg
Aravindba 4-Jun-13 3:39am    
hai pls reply me how to give url path
AlphaDeltaTheta 4-Jun-13 4:24am    
Give the location of your image...?? relative to site root
Try below mention style
  .strechBKImage
   {
    background: url(WebSiteDesign.jpg) no-repeat center center fixed;
    webkit-background-size: cover;
    moz-background-size: cover;
    o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='WebSiteDesign.jpg',     sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='WebSiteDesign', sizingMethod='scale');
}
 
Share this answer
 
Comments
Aravindba 4-Jun-13 2:16am    
how to give image url in background: url(WebSiteDesign.jpg) and src='WebSiteDesign' ?
i have image in C:\inetpub\wwwroot\aravind\images, aravind is my website folder in wwroot and images are available in 'images' folder,pls tell me how to give url for image in 3 places in ur code.is it enough only image name with extension ? or need to give full path ? aravind is website folder and available in iis .if other than ie whether it call image or need to give image in td tag ?
Thanx
Mahesh Bailwal 4-Jun-13 2:23am    
just give src=image\yourimagename.png
Aravindba 4-Jun-13 2:44am    
no ,it not work,pls clearly explain with my path
Aravindba 4-Jun-13 3:39am    
hi pls reply me how to give ur path ?
Mahesh Bailwal 4-Jun-13 4:05am    
Post your code I will edit it.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900