2

Estou com duvidas de como torna o background para ficar responsivo.

Este é o Background. inserir a descrição da imagem aqui

Este é como ele tá ficando com 1024px de Largura. inserir a descrição da imagem aqui

Estou colocando no Background-Size 100% de Largura, gostaria que quando a Background diminuir sua propria altura o container também pudesse ficar com a mesma altura para não ficar com esse espaço em branco como está na imagem.

Agradecido pessoal.

2
  • tenta colocar um padding-bottom: 100% na div que está esse bg e não defina height. 12/08/2014 às 15:00
  • Olá Gustavo, obrigado pela atenção. Fiz o que você disse, porém ao fazer isso a altura ficou muito alta, menos tirando o height. 12/08/2014 às 15:34

3 Respostas 3

1

Olá,

Você poderia tentar:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

Sem width, height ou margin.

Caso não funcione de primeira, tenta adaptar pro seu projeto seguindo as referências abaixo:

Espero que ajude. =)

1

tenta fazer assim:

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

http://css-tricks.com/perfect-full-page-background-image/

0

Se o objetivo for exibir esta imagem em diferentes devices, use media queries. Aqui abaixo um exemplo para ser usado uma imagem grande pro desktop e outra feita sob medida para os telefones. Alem de exibir uma imagem mais legivel a imagem tem um peso menor para as internets de 3G.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        #image { 
            background-image: url(largeimage.jpg); no-repeat center center fixed; 
            background-size: cover;


        }
        @media only screen and (max-width: 320px) {
            #image { 
                background-image: url(smallimage.jpg); 
            }
        }
        </style>
    </head>
    <body>
        <div id="image"></div>
    </body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .