Buffon Buffon - 7 months ago 32
HTML Question

Stretch background image css?

<td class="style1" align='center' height='35'>
<div style='overflow: hidden; width: 230px;'>
<a class='link' herf='' onclick='topic(<?=$key;?>)'>
<span id='name<?=$key;?>'><?=$name;?></span> </a>
</div>
</td>


This is my CSS script

.style1 {
background-image:url('http://localhost/msite/images/12.PNG');
background-repeat:no-repeat;
background-position:left center;
}


I want to stretch the
background-image
all over the
<td>
cell

Answer
.style1 {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Works in:

  • Safari 3+
  • Chrome Whatever+
  • IE 9+
  • Opera 10+ (Opera 9.5 supported background-size but not the keywords)
  • Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

In addition you can try this for an ie solution

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
    zoom:1;

Credit to this article by Chris Coyier http://css-tricks.com/perfect-full-page-background-image/

Comments