Backgrond auto ajustavel

[botasleve 1]

Queria saber como fazer uma div com background auto ajustavel de acordo com o tamanho da tela.

[andersonseifert 10]

Amigo usa % nas Div ao invés de px, ou se nao conhece laout Resposivo ?

[botasleve 1]

Conheço layout responsivo, mas usar % nas div não adianta pra ela auto se ajustar jovem. Já desenvolvi aqui imagem auto ajustavel(slideshow), etc... Só que eu quero fazer agora com o background.

 

Mas obviamente coloca % não vai auto se ajustar a imagem de acordo com a tela for diminuindo.

[reidark 5]

Tenta isso: http://webdesign.about.com/od/css3tutorials/a/browser-size-cover.htm

[andersonseifert 10]

O que voce quer e ajustar a IMG isso ?

[botasleve 1]

O que voce quer e ajustar a IMG isso ?

Auto ajustar a imagem assim que a janela for diminuida isso eu já sei queria um código pra auto ajustar o background image de uma div... Mas ja ja vou ler o post ali q o cara me indicou.

[vonzuben 12]

usa Bootstrap e coloca class="img-responsive"

[botasleve 1]

usa Bootstrap e coloca class="img-responsive"

ODEIO usar esses códigos prontos para coisas simples :B

[andersonseifert 10]

Cara de uma olhadinha nessa documentação vai te ajudar :

 

http://www.w3.org/TR/css3-background/#the-background-size

[xanburzum 169]

Se a imagem que será redimensionada estiver em uma tag html <img src="..."/>, utilizamos width e height na própria tag ou no CSS:

seletor img {

width:xx; /* largura */

height:xx; /* altura */

}

Porém se a imagem estiver no CSS, como no exemplo abaixo:

#div {

background-image: url(imagem.jpg);

}

Usaremos o background-size. E nosso exemplo fica assim:

#div {

background-image: url(imagem.jpg);

background-size:100% 100%;

-webkit-background-size: 100% 100%;

-o-background-size: 100% 100%;

-khtml-background-size: 100% 100%;

-moz-background-size: 100% 100%;

}

Os valores 100% 100% representam respectivamente largura e altura, que devem ser alterados para os valores desejados nas cinco linhas.

[pedrohsb 6]

Olá botasleves!

 

Uma vez eu criei um código para fazer com que a imagem se encaixe 100% no background da div.

Vale ressaltar que no código não tem hack para IE. ;)

 

CSS:

background: url("imagem_aqui") fixed no-repeat;  
-webkit-background-size: cover;  
-o-background-size: cover;  
-moz-background-size: cover;  
background-size: cover;

Agora só vai depender do tamanho da div para o background se ajustar.

[xanburzum 169]

vc tentou assim:

 

 

#div {
background-image: url(imagem.jpg);
background-size:100% 100%;
-webkit-background-size: 100% 100%;
-o-background-size: 100% 100%;
-khtml-background-size: 100% 100%;
-moz-background-size: 100% 100%;
}

[andersonseifert 10]

o que eu mandei brother, tudo colocou ae !