Arka plan resmi css uzatmak?

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

Bu benim CSS betiğim

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

background-imageTüm <td>hücrenin üzerine uzanmak istiyorum

.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;
}

Çalıştığı yerler:

• Safari 3+
• Chrome +
• IE 9+
• Opera 10+ (Opera 9.5, arka plan boyutunu destekledi ancak anahtar kelimeleri desteklemedi)
• Firefox 3.6+ (Firefox 4, satıcı olmayan ön ekli sürümü destekler)

Ayrıca bunu bir IE çözümü için deneyebilirsiniz

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

Bu makaleye Chris Coyier tarafından verilen http://css-tricks.com/perfect-full-page-background-image/

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

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

Yalnızca genişlik veya yüksekliği aşağıdakilerle belirleyebilirsiniz:

background-size: 100% 50%;

Bu, genişliğin% 100'ünü ve yüksekliğinin% 50'sini gerecek.

Tarayıcı desteği: http://caniuse.com/#feat=background-img-opts

Arka plan resmini uzatamazsınız (CSS 3'e kadar).

Mutlak konumlandırma kullanmanız gerekir, böylece hücrenin içine bir görüntü etiketi koyabilir ve tüm hücreyi kapsayacak şekilde gerebilir, ardından içeriği görüntünün üstüne koyabilirsiniz.

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>

Bence aradığın şey

.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;
}

2019'da sorunsuz çalışıyor

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

Bunu kod satırınıza yapıştırın:

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