Esticar imagem de fundo 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 é o meu script CSS

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

Eu quero esticar background-imagetodo o <td>celular

html css background Buffon
fonte

Apenas observe que o alongamento de imagens raster degrada a qualidade.

Wdm

2

duplicar de stackoverflow.com/questions/376253/...

Alex Shesterov

@ wdm: a degradação da qualidade não acontecerá se for um svg.

posit labs

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

Trabalha em:

Safari 3+
Chrome Whatever +
IE 9+
Opera 10+ (o Opera 9.5 suporta tamanho de fundo, mas não as palavras-chave)
Firefox 3.6+ (o Firefox 4 suporta a versão prefixada por não fornecedor)

Além disso, você pode tentar isso para uma solução do 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 para este artigo por Chris Coyier http://css-tricks.com/perfect-full-page-background-image/

Blowsie
fonte

esta funcionando bem, mas eu quero esticar a altura só como eu posso fazer isso

Buffon

3

obrigado pela ajuda-lo funcionar quando eu mudar isso no seu código -moz-background-size: 100% 100%;funciona como eu quero ... agradecer u

Buffon

1

Outra solução para o IE8 e inferior: github.com/louisremi/background-size-polyfill

Irongaze.com

6

funcionou para mim depois de mudar background-size: cover;para `background-size: 100% 100%;`

ivan.mylyanyk

1

Eu precisava de uma altura fixa (130px) e largura total. Isso funcionou: background: url("images/bg.jpg") no-repeat center 0 fixed;e background-size: 100% 130px;(etc.). Centralizar a altura (como na resposta) ocultaria o plano de fundo se ele fosse curto o suficiente.

03

62

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

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

Você pode especificar apenas largura ou altura com:

background-size: 100% 50%;

O que aumentará 100% da largura e 50% da altura.

Suporte para navegador: http://caniuse.com/#feat=background-img-opts

Calum
fonte

1

Uau, isso funcionou perfeitamente para mim - tentei as outras respostas e uma série de técnicas diferentes. Mas isso era tão simples e funcionou instantaneamente. Obrigado: D

DylanT 25 /

11

Você não pode esticar uma imagem de plano de fundo (até CSS 3).

Você precisaria usar o posicionamento absoluto, para poder colocar uma tag de imagem dentro da célula e esticá-la para cobrir a célula inteira e colocar o conteúdo na parte superior da imagem.

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 snippet

Guffa
fonte

1

+1, correto. Também é uma boa idéia para quebrar o <img>com um <div>ter position: relative;e máxima largura / altura. O TD em si não é relativamente posicionado em todos os navegadores, se houver.

14/04

Eu estava lutando com o IE, +1 para isso

arjuncc

9

Eu acho que o que você está procurando é

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

failed_hard
fonte

é exatamente disso que eu preciso!

Rachelle Uy

0

Isso funciona perfeitamente em 2019

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

Mujeeb Ishaque
fonte

-7

Basta colar isso na sua linha de códigos:

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

LumiereNG
fonte

Esticar imagem de fundo css?

Respostas: