Um ótimo exemplo de mudança de imagem de fundo de acordo com a resolução da tela, é o site da starbucks.com.br.
Com a tela maximizada, a imagem de fundo fica assim:
Quando diminuímos a resolução da tela, para o tamanho de um smartphone, a imagem é alterada, ficando igual a imagem ao lado.E como é realizado este efeito de troca de imagens, utilizando apenas CSS?
Primeiro vamos colocar a imagem de fundo como background que funcionará para a tela reduzida.
Agora só precisamos definir o tamanho mínimo que será aplicado como fundo, usando o @media only screen and( min-width:500px). Isto definirá que as telas com resolução maiores que 500px assumirão as propriedades dentro do @media, conforme o exemplo abaixo:
Lembrando que estes códigos deverão estar dentro das tags style ou do arquivo css do seu site.
Com a tela maximizada, a imagem de fundo fica assim:
Quando diminuímos a resolução da tela, para o tamanho de um smartphone, a imagem é alterada, ficando igual a imagem ao lado.E como é realizado este efeito de troca de imagens, utilizando apenas CSS?
Primeiro vamos colocar a imagem de fundo como background que funcionará para a tela reduzida.
body {
background-repeat: no-repeat;
background-image: url('flor.jpg');
}
Agora só precisamos definir o tamanho mínimo que será aplicado como fundo, usando o @media only screen and( min-width:500px). Isto definirá que as telas com resolução maiores que 500px assumirão as propriedades dentro do @media, conforme o exemplo abaixo:
/* Para resolução maior que 500px: */
@media only screen and (min-width: 500px) {
body {
background-image: url('flores.jpg');
}
}
Lembrando que estes códigos deverão estar dentro das tags style ou do arquivo css do seu site.
0 comments:
Postar um comentário