Esticar e dimensionar o fundo do CSS

Existe uma maneira de obter um background em CSS para esticar ou dimensionar para preencher seu contêiner?

Para navegadores modernos, você pode fazer isso usando background-size:

body {
    background-image: url(bg.jpg);
    background-size: cover;
}

cover significa esticar a imagem na vertical ou na horizontal, para que nunca se repita.

Isso funcionaria para o Safari 3 (ou posterior), Chrome, Opera 10+, Firefox 3.6+ e Internet Explorer 9 (ou posterior).

Para que ele funcione com versões inferiores do Internet Explorer, tente o seguinte CSS:

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

Use a propriedade CSS 3background-size :

#my_container {
    background-size: 100% auto; /* width and height, can be %, px or whatever. */
}

Está disponível para navegadores modernos, desde 2012.

Escalar uma imagem com CSS não é bem possível, mas um efeito semelhante pode ser alcançado da seguinte maneira.

Use esta marcação:

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

com o seguinte CSS:

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:100%;
}

e você deve estar pronto!

Para dimensionar a imagem para "sangrar completamente" e manter a proporção, você pode fazer isso:

.stretch { min-width:100%; min-height:100%; width:auto; height:auto; }

Funciona muito bem! Se uma dimensão for cortada, no entanto, ela será cortada em apenas um lado da imagem, em vez de ser cortada uniformemente nos dois lados (e centralizada). Eu testei no Firefox, Webkit e Internet Explorer 8.

Use o atributo size-background em CSS3:

.class {
     background-image: url(bg.gif);
     background-size: 100%;
}

EDIT: Modernizr suporta a detecção de suporte de tamanho de fundo . Você pode usar uma solução alternativa JavaScript criada para funcionar, no entanto, precisar e carregá-la dinamicamente quando não houver suporte. Isso manterá o código sustentável, sem recorrer a invasões CSS intrusivas para determinados navegadores.

Pessoalmente, eu uso um script para lidar com ele usando jQuery, é uma adaptação do imgsizer . Como a maioria dos modelos que agora uso largura% s para layouts de fluido entre dispositivos, há uma leve adaptação a um dos loops (considerando tamanhos que nem sempre são 100%):

for (var i = 0; i < images.length; i++) {
    var image = images[i],
        width = String(image.currentStyle.width);

    if (width.indexOf('%') == -1) {
        continue;
    }

    image.origWidth = image.offsetWidth;
    image.origHeight = image.offsetHeight;

    imgCache.push(image);
    c.ieAlpha(image);
    image.style.width = width;
}

Edição: Você pode também estar interessado em jQuery CSS3 Finaliz [s] e .

Experimente o tamanho do plano de fundo do artigo . Se você usar todas as opções a seguir, ele funcionará na maioria dos navegadores, exceto no Internet Explorer.

.foo {
    background-image: url(bg-image.png);
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%; 
    background-size: 100% 100%;
} 

Atualmente não. Ele estará disponível no CSS 3 , mas levará algum tempo até ser implementado na maioria dos navegadores.

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

Em uma palavra: não. A única maneira de esticar uma imagem é com a <img>tag. Você terá que ser criativo.

Isso costumava ser verdade em 2008, quando a resposta foi escrita. Atualmente, os navegadores modernos suportam a background-sizesolução desse problema. Cuidado que o IE8 não suporta.

Definir "esticar e escalar" ...

Se você possui um formato de bitmap, geralmente não é ótimo (graficamente falando) esticá-lo e puxá-lo. Você pode usar padrões repetíveis para dar a ilusão do mesmo efeito. Por exemplo, se você tem um gradiente que fica mais claro na parte inferior da página, use um gráfico com um único pixel de largura e a mesma altura do seu contêiner (ou de preferência maior para contabilizar o dimensionamento) e, em seguida, coloque-o lado a lado no página. Da mesma forma, se o gradiente percorresse a página, ele teria um pixel de altura e mais largura do que seu contêiner e repetiria a página.

Normalmente, para dar a ilusão de esticar para encher o contêiner quando o contêiner cresce ou diminui, você aumenta a imagem do contêiner. Qualquer sobreposição não seria exibida fora dos limites do contêiner.

Se você deseja um efeito que se assemelhe a algo como uma caixa com bordas curvas, cole o lado esquerdo da caixa no lado esquerdo do contêiner com sobreposição suficiente que (dentro da razão) não importa o tamanho do contêiner, ele nunca fica sem fundo e, em seguida, você coloca uma imagem do lado direito da caixa com bordas curvas e a posiciona à direita do contêiner. Assim, à medida que o contêiner encolhe ou cresce, o efeito de caixa curva parece encolher ou crescer com ele - na verdade não, mas dá a ilusão de que é o que está acontecendo.

Para realmente fazer a imagem encolher e crescer com o contêiner, você precisará usar alguns truques de camadas para fazer com que a imagem pareça funcionar como plano de fundo e algum javascript para redimensioná-la com o contêiner. Não existe uma maneira atual de fazer isso com CSS ...

Se você estiver usando gráficos vetoriais, está muito fora do meu domínio de especialização, receio.

Isto é o que eu fiz disso. Na aula de alongamento, simplesmente mudei a altura para auto. Dessa forma, sua imagem de plano de fundo sempre tem o mesmo tamanho da largura da tela e a altura sempre terá o tamanho certo.

#background {
    width: 100%;
    height: 100%;
    position: absolute;
    margin-left: 0px;
    margin-top: 0px;
    z-index: 0;
}

.stretch {
    width:100%;
    height:auto;
}

Adicione uma background-attachmentlinha:

#background {
    background-attachment:fixed;
    width: 100%; 
    height: 100%; 
    position: absolute; 
    margin-left: 0px; 
    margin-top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:auto;
}

Gostaria de salientar que isso é equivalente a fazer:

html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; /* Add background image or gradient to stretch here. */}

Outra ótima solução para isso é o Backstretch de Srobbin, que pode ser aplicado ao corpo ou a qualquer elemento da página - http://srobbin.com/jquery-plugins/backstretch/

Tente isto

http://jsfiddle.net/5LZ55/4/

body
{ 
    background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

Uma dica adicional para a trapaça do SolidSmile é escalar (o redimensionamento proporcional) definindo uma largura e usando automático para altura.

Ex:

#background {
    width: 500px;
    height: auto;
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

Use a border-image : yourimagepropriedade para definir sua imagem e dimensioná-la até a borda inteira da tela ou janela.