Растянуть фоновое изображение 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>

Это мой CSS-скрипт

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

Я хочу растянуть background-image по всей <td> ячейке


html css background
person Buffon    schedule 14.04.2011    source источник
comment
Сразу отметим, что растягивание растровых изображений ухудшает качество.   -  person wdm    schedule 14.04.2011
comment
дубликат ​​stackoverflow.com/questions/376253/   -  person Alex Shesterov    schedule 18.03.2013
comment
@wdm: ухудшения качества не произойдет, если это svg.   -  person posit labs    schedule 16.12.2014

Ответы (6)


arrow_upward
309
arrow_downward 

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

Работает в:

  • Safari 3+
  • Chrome Whatever +
  • IE 9+
  • Opera 10+ (Opera 9.5 поддерживает размер фона, но не ключевые слова)
  • Firefox 3.6+ (Firefox 4 поддерживает версии без префиксов сторонних производителей)

Кроме того, вы можете попробовать это для решения IE

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

Благодарим за эту статью Криса Койера http://css-tricks.com/perfect-full-page-background-image/

person Blowsie    schedule 14.04.2011
comment
это работает нормально, но я хочу растянуть высоту, только как я могу это сделать - person Buffon; 14.04.2011
comment
спасибо за помощь, когда я изменил это в вашем коде -moz-background-size: 100% 100%; он работает так, как я хочу ... спасибо - person Buffon; 14.04.2011
comment
Другое решение для IE8 и ниже: github.com/louisremi/background-size-polyfill - person Irongaze.com; 18.12.2012
comment
работал у меня после изменения background-size: cover; на `background-size: 100% 100%;` - person ivan.mylyanyk; 31.10.2013
comment
Мне нужна была фиксированная высота (130 пикселей) и полная ширина. Это сработало: background: url("images/bg.jpg") no-repeat center 0 fixed; и background-size: 100% 130px; (и т. Д.). Центрирование высоты (как в ответе) скроет фон, если он будет достаточно коротким. - person sleeparrow; 03.01.2017

arrow_upward
65
arrow_downward

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

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

Вы можете указать ширину или высоту с помощью:

background-size: 100% 50%;

Это растянет его на 100% ширины и 50% высоты.

Поддержка браузера: http://caniuse.com/#feat=background-img-opts

person Calum    schedule 14.04.2011
comment
Вау, это отлично сработало для меня - я попробовал другие ответы и ряд различных методов. Но это было так просто и сработало мгновенно. Спасибо: D - person DylanT 25; 13.01.2019

arrow_upward
11
arrow_downward

Вы не можете растянуть фоновое изображение (до CSS 3).

Вам нужно будет использовать абсолютное позиционирование, чтобы вы могли поместить тег изображения внутри ячейки и растянуть его, чтобы покрыть всю ячейку, а затем поместить содержимое поверх изображения.

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>

person Guffa    schedule 14.04.2011
comment
+1, правильно. Также неплохо заключить <img> в <div>, имеющий position: relative; и максимальную ширину / высоту. Сам TD не позиционируется относительно во всех браузерах, если таковые имеются. - person madr; 14.04.2011
comment
Я боролся с IE, +1 за это - person arjuncc; 19.03.2013

arrow_upward
10
arrow_downward

Я думаю, что ты ищешь

.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;
}
person failed_hard    schedule 23.01.2014

arrow_upward
1
arrow_downward

Это работает безупречно @ 2019

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

arrow_upward
-7
arrow_downward

Просто вставьте это в свою строку кода:

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
person LumiereNG    schedule 26.05.2016