Css hình nền kéo dài?

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

Đây là tập lệnh CSS của tôi

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

Tôi muốn kéo dài background-imagetất cả các <td>tế bào

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

Hoạt động trong:

• Safari 3+
• Chrome bất cứ điều gì +
• IE 9+
• Opera 10+ (Opera 9.5 hỗ trợ kích thước nền nhưng không phải từ khóa)
• Firefox 3.6+ (Firefox 4 hỗ trợ phiên bản tiền tố không phải của nhà cung cấp)

Ngoài ra, bạn có thể thử điều này cho một giải pháp IE

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

Tín dụng cho bài viết này của Chris Coyier http://css-tricks.com/perinf-full-page-background-image/

CSS3: http://webdesign.about.com/od/styleproperIES/p/blspbgsize.htmlm

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

Bạn có thể chỉ định chiều rộng hoặc chiều cao với:

background-size: 100% 50%;

Nó sẽ kéo dài 100% chiều rộng và 50% chiều cao.

Hỗ trợ trình duyệt: http://caniuse.com/#feat=background-img-opts

Bạn không thể kéo dài hình nền (cho đến CSS 3).

Bạn sẽ phải sử dụng định vị tuyệt đối, để bạn có thể đặt một thẻ hình ảnh bên trong ô và kéo dài nó để bao phủ toàn bộ ô, sau đó đặt nội dung lên trên cùng của hình ảnh.

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>

Tôi nghĩ những gì bạn đang tìm kiếm là

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

Điều này hoạt động hoàn hảo @ 2019

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

Chỉ cần dán mã này vào dòng mã của bạn:

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