CSS height 100%

[kaayasinho 0]

Pessoal, to com mais um problema..

 

 

coloquei uma imagem gigante.. para ocupar, todo o fundo da home.. mas estou com um problema

 

quando coloco HEIGHT:100% e a tela esta em navegador de computador fica em tela cheia.. mas quando fica em dispositivo mobile

ela diminui diminui o tamanho e deixa o rodape vazio, todo pretoo

 

vejam o problema..

tentem redimemcionar o navegador vao ver que a imagem, vai acompanhar ate a altura original dela. depois ela quebra e sobe..

http://www.theoneeventos.com.br/teste

 

existe alguma forma de travar height? para que o fundo nao fique vazio?

obrigado!

[WictorP 9]

Tente assim:

 

@media (min-width: 950px)
.imgFundoHome {
max-width: 100%;
min-width: 90%;
opacity: 0.5;
position: fixed;
left: 0px;
}

[kaayasinho 0]

Tente assim:

 

@media (min-width: 950px)
.imgFundoHome {
max-width: 100%;
min-width: 90%;
opacity: 0.5;
position: fixed;
left: 0px;
}

 

deu na mesma

[WictorP 9]

deu na mesma

Como deu na mesma? '-'

Com este código a tag IMG rodaria junto com o body. '-'

[Marlon Pacheco 132]

Buenas tchê.

 

Tu vai ter que colocar essa imagem como background, via CSS.

Assim tu conseguiria fazer a imagem se ajustar em todo o elemento de acordo com a resolução.

[Fagner Moraes 0]

Como o Marlon Falou você coloca ele como fundo no CSS:

 

O código pode ser esse aqui:

Código CSS:

body{
	background: url("Papel-de-Parede-de-Carros.jpg");
	background-size: 100%;
    background-repeat: no-repeat;
}

[kaayasinho 0]

Buenas tchê.

 

Tu vai ter que colocar essa imagem como background, via CSS.

Assim tu conseguiria fazer a imagem se ajustar em todo o elemento de acordo com a resolução.

 

 

Como o Marlon Falou você coloca ele como fundo no CSS:

 

O código pode ser esse aqui:

Código CSS:

body{
	background: url("Papel-de-Parede-de-Carros.jpg");
	background-size: 100%;
    background-repeat: no-repeat;
}

 

nesse caso da na mesma.. pois ja dei uma classe, no IMG. que faz ele fica 100%

 

oq eu queria.. eh que quando redimencionar o navegador. a imagem nao corte embaixo.. entende?

que a imagem fique meio que um zoom, para evitar que a foto de fundo diminua junto

 

eh so fazer o teste do link que mandei.. e diminuir o tamanho do navegador um pouco, a foto vai diminuir junto e em vez de travar para o background nao ficar vazio. ela diminui junto..

 

 

OBS: nao diminuir muito pois ainda nao fiz a media querye para mobile dessa img

[Fagner Moraes 0]

então você pode ir alterando quando tiver com width com tão tamanho a imagem fica com height de tão tamanho

[kaayasinho 0]

mas ai.. distorceria a imagem nao?

nao tem uma forma da image.. ficar centralizada.. e quando diminui o width. do navegador, ela fixa em um tamanho evitando q ela diminua?

[rikaschmitt 54]

Colocando ela como background da div, com posição fixed, não adianta?

[Fagner Moraes 0]

então pra controlar isso

 

quando tiver em com width limite você aplica o tamanho que achar que fica bem

Acho que assim deve funcionar com a responsividade de tela

 

deve ter um jeitinho mais fácil mas olha esse teste que fiz talvez se calcular certo o tamanho que pretende fique legal:

body{
	background: url("Papel-de-Parede-de-Carros.jpg");
	background-size: 100%;
    background-repeat: no-repeat;
}

@media screen and (max-width: 900px) and (max-height: 600px){
	body{
		background-size: 900px 600px;
	}
}

[kaayasinho 0]

galera eu consegui dessa forma criando uma div com background com disseram

obrigado pela ajuda a todos!

 

.imgFundoHome{

width:1440px;

height:900px;

margin:0 auto;

background:url(../images/02.jpg);

opacity:0.5;

}