Estirar la imagen de fondo 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>

Este es mi script CSS

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

Quiero estirar el background-image por toda la celda <td>

Author: Vadim Ovchinnikov, 2011-04-14
Source

5 answers

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

Funciona en:

  • Safari 3 +
  • Chrome Lo que sea +
  • IE 9 +
  • Opera 10+ (Opera 9.5 admite el tamaño de fondo, pero no las palabras clave)
  • Firefox 3.6+ (Firefox 4 es compatible con la versión sin prefijo de proveedor)

Además, puede probar esto para una solución IE

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

Crédito a este artículo de Chris Coyier http://css-tricks.com/perfect-full-page-background-image /

 241
Author: Blowsie,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-20 10:49:27

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

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

Puede especificar solo ancho o alto con: 

background-size: 100% 50%;

Que lo estirará 100% de la anchura y 50% de la altura.

Soporte del navegador: http://caniuse.com/#feat=background-img-opts

 47
Author: Calum,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-20 10:58:02

No se puede estirar una imagen de fondo (hasta CSS 3).

Tendría que usar posicionamiento absoluto, de modo que pueda poner una etiqueta de imagen dentro de la celda y estirarla para cubrir toda la celda, luego poner el contenido encima de la imagen.

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>
 8
Author: Guffa,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-20 11:02:02

Creo que lo que estás buscando es

.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;
}
 5
Author: failed_hard,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-20 10:56:46

Simplemente pega esto en tu línea de códigos: 

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
 -5
Author: LumiereNG,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-26 13:01:26