Stretch background image css?

Question

<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 1

.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/

Answer 2

CSS3: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm

.style1 {
  ...
  background-size: 100%;
}

You can specify just width or height with:

background-size: 100% 50%;

Which will stretch it 100% of the width and 50% of the height.

---

Browser support: http://caniuse.com/#feat=background-img-opts

Answer 3

You can't stretch a background image (until CSS 3).

You would have to use absolute positioning, so that you can put an image tag inside the cell and stretch it to cover the entire cell, then put the content on top of the image.

 table { width: 230px; } .style1 { text-align: center; height: 35px; } .bg { position: relative; width: 100%; height: 100%; } .bg img { display: block; width: 100%; height: 100%; } .bg .linkcontainer { position: absolute; left: 0; top: 0; overflow: hidden; width: 100%; } 

 <table cellpadding="0" cellspacing="0" border="10"> <tr> <td class="style1"> <div class="bg"> <img src="http://placekitten.com/20/20" alt="" /> <div class="linkcontainer"> <a class="link" href="#"> <span>Answer</span> </a> </div> </div> </td> </tr> </table> 

Answer 4

I think what you are looking for is

.style1 {
  background: url('http://localhost/msite/images/12.PNG');
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}

Answer 5

This works flawlessly @ 2019

.marketing-panel  {
    background-image: url("../images/background.jpg");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
}

Answer 6

只需将其粘贴到您的代码行中：

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />