Estirar imagen de fondo css?

176

<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 background-imagetodo sobre la <td>celda

html css background Buffon
fuente

Solo una nota de que estirar imágenes ráster degrada la calidad.

wdm

2

duplicado de stackoverflow.com/questions/376253/…

Alex Shesterov

@wdm: la degradación de la calidad no ocurrirá si se trata de un svg.

laboratorios

297

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

Trabaja 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 prefijada de no 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 por Chris Coyier http://css-tricks.com/perfect-full-page-background-image/

Blowsie
fuente

esto funciona bien, pero quiero estirar la altura sólo cómo puedo hacer eso

Buffon

3

gracias por ayudarlo a funcionar cuando cambio eso en su código -moz-background-size: 100% 100%;, funciona como quiero ... gracias

Buffon

1

Otra solución IE8 y más baja: github.com/louisremi/background-size-polyfill

Irongaze.com

66

funcionó para mí después de cambiar background-size: cover;a `background-size: 100% 100%;`

ivan.mylyanyk

1

Necesitaba una altura fija (130 px) y un ancho completo. Esto funcionó: background: url("images/bg.jpg") no-repeat center 0 fixed;y background-size: 100% 130px;(etc.). Centrar la altura (como en la respuesta) ocultaría el fondo si fuera lo suficientemente corto.

Sleeparrow

62

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

Lo que lo estirará al 100% del ancho y al 50% de la altura.

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

Calum
fuente

1

Wow, eso funcionó perfectamente para mí: probé las otras respuestas y una serie de técnicas diferentes. Pero esto fue muy simple y funcionó al instante. Gracias: D

DylanT 25

11

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

Tendría que usar un posicionamiento absoluto, para poder colocar una etiqueta de imagen dentro de la celda y estirarla para cubrir toda la celda, luego colocar el contenido en la parte superior 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>

Expandir fragmento

Guffa
fuente

1

+1, correcto. También es una buena idea para envolver el <img>de una <div>que tiene position: relative;anchura / altura y el máximo. El TD en sí no tiene una posición relativa en todos los navegadores, si los hay.

madr

Estaba luchando con IE, +1 por eso

arjuncc

9

Creo que lo que buscas 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;
}

fracasado
fuente

¡Esto es exactamente lo que necesito!

Rachelle Uy

0

Esto funciona perfectamente @ 2019

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

Mujeeb Ishaque
fuente

-7

Simplemente pegue esto en su línea de códigos:

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

LumiereNG
fuente

Estirar imagen de fondo css?

Respuestas: