background Como faço um background ajustável e fixo à resolução?

wig07 · Abril 22, 2016

Olá amigos, estou bolando uma página de erro 404, para isso fiz uma imagem png, queria que ela se tornasse ajustável à qualquer dispositivo SEM QUE ELA DISTORÇA ou corte alguma parte dela.

Se existe algum método possível, seria até melhor fazer várias imagens de tamanhos diferentes de modo que quando aberta àquela resolução, abra-se a imagem correspondente. Como por exemplo para PC uma widescreen para celular uma "compacta" tamanho iPhone.

Enfim, estou usando isto:

<html><head><style>
body{
background-image:url(/sources/404b.png);
background-attachment:fixed;
background-size:100%;
background-repeat:no-repeat;
background-color:#000;
}

</style></head></html>

Quando abro no meu navegador está ok, no celular ele corta praticamente metade.

pwd · Abril 22, 2016

wig07 · Abril 22, 2016

Agora no celular não abre nem 10% da página, como disse, seria possível abrir uma imagem específica para cada resolução? Eu crio uma adaptada para o tamanho padrão de um celular, uma outra para monitores "quadrados" e outra widescreen... conforme a resolução do dispositivo abrirá a imagem correspondente.

pwd · Abril 22, 2016

Tem sim, com media query

Como está sua imagem? Em termos de dimensões?

Pode usar o

background-size: cover;
background-position: top center;

wig07 · Abril 22, 2016

A imagem é em jpg sob proporção de 1600x1000. Que funciona corretamente ao screen do computador mas no celular, que é o maior número de visitas, fica a desejar...

pwd · Abril 22, 2016

Pelo tamanho, vai ficar estranho mesmo.

Faz o teste para vc ver:

background-size: 100% 100vh;

wig07 · Abril 23, 2016

Exatamente, a imagem fica MUITO distorcida, como funciona este "media query" que vc falou?

pwd · Abril 24, 2016

Vejo que vc já tem um conhecimento, então é só estudar um pouco sobre que vc pega rápido.

No seu caso segue um exemplo de como faria, imaginando seu caso

body{
      
    background-image:url(/sources/bg-pequeno.png); 
    background-attachment:fixed;
    background-size:100%;
    background-repeat:no-repeat;
    background-color:#000;
    
}



@media (min-width : 320px) {

}

@media (min-width : 480px) {

}

@media (min-width : 768px) {

}

@media (min-width : 992px) {
    
    body{
        background-image:url(/sources/404b.png);
    }

}

@media (min-width : 1200px) {

}

wig07 · Abril 25, 2016

Muito bem, vamos ver se consegui compreender, eu precisaria jogar este código no meu css que está linkado à página html (404.html), acrescentando isto:

    
    body{
        background-image:url(/sources/404b.png);
    }

}

à cada elemento @media substituindo "404b.png" por uma imagem de width igual ao valor emitido pelo @media?

Se entendi ficaria algo como:

body{
      
    background-image:url(/sources/bg-pequeno.png); 
    background-attachment:fixed;
    background-size:100%;
    background-repeat:no-repeat;
    background-color:#000;
    
}



@media (min-width : 320px) {
    
    body{
        background-image:url(/sources/404b-320.png);
    }

}

@media (min-width : 480px) {
    
    body{
        background-image:url(/sources/404b-480.png);
    }

}

@media (min-width : 768px) {
    
    body{
        background-image:url(/sources/404b-768.png);
    }

}

@media (min-width : 992px) {
    
    body{
        background-image:url(/sources/404b-992.png);
    }

}

@media (min-width : 1200px) {
    
    body{
        background-image:url(/sources/404b-1200.png);
    }

}

E por quê de no body temos um "../bg-pequeno.png"?

L. Henrique · Abril 25, 2016

Wig,

Vamos partir do principio, ok?

Você tem uma imagem 1600x1000 (que já é um absurdo de tamanho se formos falar de desempenho) e você quer que ela se adapte a todos os dispositivos... Vendo pelo seus comentários anteriores, você criou uma imagem baseada no tamanho do seu próprio monitor (o que é errado).

Quando você define uma imagem (tamanho / peso), você precisa entender que ela deverá servir para todos os dispositivos. Não é só fazer uma imagem, preencher todo o espaço possível e esperar que ela se adapte.

Entenda que essa sua imagem 1600x1000, ela passa a se comprimir a 350x650 (exemplo) e isso ferra com o Aspect Ratio (vale estudar) dela. Esse Aspect Ratio é o que você precisa preservar em todos os dispositivos (ou seja, deixar sua imagem visível e compreensível em qualquer tamanho de tela - sem que ele crie ruídos ou estoure a qualidade).

Agora vamos a algumas explicações:
Criar um monte de media queries vai fazer com que seu site fique mais lento, mas isso não é questão dos medias, é uma questão das imagens.

Pense o seguinte: Você tem uma imagem de fundo e ela precisa mudar a cada dispositivo. Lembre-se que esse código CSS está sendo lido e carregado pelo Browser, ou seja, você tem 5 media queries com 5 imagens diferentes. O seu site vai demorar mais tempo pra ler todos esses 5 media queries com essas 5 imagens diferentes. Entendeu? Ele não precisa perder todo esse tempo pra ficar lendo imagens. Estude por Progressive Enhancement.

O site não tem a necessidade de carregar algo que não precisa utilizar, por isso, nesse caso os media queries estão fora de questão. Eles se tornam mais uma "gambiarra" pra você achar que resolveu tudo.

Vamos as possíveis soluções:

Você pode substituir sua imagem por um .SVG - eles são mais carregados, porém são mais fáceis de serem manipulados. Eles podem sofrer mudanças drásticas de tamanho sem que percam seus Aspect Ratio's.
Você pode criar uma nova imagem com um logo/personagem/imagem centralizado e com tamanho total de 350px (w/h). Você só precisa tornar uma única informação visível. Ou seja, priorizar o que realmente é importante ou se é importante.
Quer continuar usando media queries? Então faça o seguinte: Separe eles em outros arquivos (fora do mesmo CSS do Desktop) e declare uma função que só permita o browser ler esse CSS se ele for dispositivo mobile.

Um exemplo de código do item 3:

<?php function isMobile(){return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);}
   if ( isMobile() ) :
?>
   <link rel="stylesheet" href="mobile.css">
<?php endif; ?>

Isso é em PHP, então deve servir.

Esse código vai definir o seguinte: Se for mobile, ele apresenta o mobile.css. Fim. Essa é uma das maneiras que você pode criar um monte de código sem afetar o desempenho dos outros dispositivos/plataformas.

Boa sorte e bons estudos!

Obs: Quando for salvar uma imagem, não esqueça de usar a opção "Salvar para a Web" - isso reduz o tamanho e melhora o desempenho.

wig07 · Abril 25, 2016

Exatamente Henrique, prezo muito por velocidade e, consequentemente pelo peso das imagens, esta imagem que estou utilizando de 1600x1000 tem 134kb, ou seja, não sei se de fato o media query iria influenciar em termos de velocidade já que, o html só se constitui da linkagem do css.

Para falar bem a verdade sou bem leigo no assunto de php, mas poderia criar um, linkar o css e/ou criar um css para leitura de dispositivos móveis e jogar em php.

Não seria uma grande dificuldade criar imagens adaptadas para cada proporção (que na minha opinião pode parecer mais otimizado para o internauta que ajustar o aspect ratio), o que precisaria era somente fazer com que o dispositivo leia o que é para ele ler (daí a dificuldade), ou seja, a sua proporção equivalente.

Portanto, deixe-me entender, com esse código do exemplo 3 um browser de celular não leria o "404.css" mas somente o "mobile.css" e vice-versa? Assim por meio de "mobile.css" poderia eu programar a leitura de um browser mobile? Como se constituiria assim o php com media-query com mobile.css?

pwd · Abril 25, 2016

Hey cara, blzs?

Não caia na ilusão de exibir css pelo "HTTP_USER_AGENT" isso sim é gambiarra!

E outra, media query tem operadores lógicos como o "not"

Veja que no seu caso, vc tem apenas 1 problema ( um BG gigante ) isso é um elemento visual.

E lembrando que vc vai seguir o conceito de mobile first, comece pelo que realmente é relevante.

Não é só salva IMG para web, tudo precisa ser otimizado e para otimizar recomendo o https://tinypng.com/

Assim como seu CSS.

[ ]'s

L. Henrique · Abril 25, 2016

Obrigado pelo retorno, Wig.

Vamos lá... Como você disse, sua dificuldade está no em fazer com que o browser leia somente o que ele precise ler. Isso é um conceito e você não precisa entender de uma linguagem extra para aplica-lo. É só uma questão de organização de arquivos/pastas e quem pode e não pode chamar esses arquivos (ai entra o item 3).

Com essa função em PHP o browser não vai deixar de ler, a não ser que você adicione um !isMobile (ao invés de isMobile) no seu 404.css. Entendeu? Ele vai ler tudo e vai ler o adicional do mobile.css. O seu desktop não vai ler o mobile.css, pois ele está dentro de uma condição que ele descarta.

O que não precisa ser lido, recebe !isMobile. O que precisa ser lido, recebe isMobile (Sei que você não é leigo, mas como alguém pode ter uma dúvida semelhante, o uso da exclamação torna o uso negativo, ou seja, nãoIsMobile).

Faça um teste: Pegue os styles que você precisa exibir no mobile e adicione a função com o isMobile. Depois disso separe as que não precisa aparecer e nem carregar e adicione o !isMobile.

PWD: Entenda que isso é pra evitar que o browser leia o que não precisa ler. Você usando operadores lógicos como not ou media only é a mesma coisa que nada, já que ele está tendo que ler, puxar e interpretar o que o CSS deixou disposto - Sem contar que tem uma galera que adora ficar brincando de aumentar e diminuir a tela do browser.

E desde quando HTTP_USER_AGENT virou gambiarra? O.o Se você está evitando que o dispositivo carregue o que não precisa, isso é ser gambiarra? Ou é fazer com que o usuário carregue e fique perdendo mais tempo com coisas que não pertencem ao dispositivo utilizado? O User agent só é considerado ruim quando tem alternativas que solucionam tudo, mas não é o caso dos media-queries, já que eles estão tendo de ser interpretados pelo browser mesmo sem sua utilização.

Isso é um benefício para o usuário e quem desenvolve pra web deve pensar primeiro neles.

wig07 · Abril 25, 2016

Obrigado pwd pela dica, desconhecia este site, ele poderá ajudar bastante no quesito velocidade. Agora Henrique, acho que você ficou sabe errado (kkk), eu não sou nível avançado em css, foi ano passado que comecei a utilizar mais códigos que interfaces, mas hoje, meu serviço de hospedagem só me permite trabalhar por códigos html que, basicamente não é um bicho de sete cabeças, mas css é um pouquinho ainda, conheci o media query recentemente quando instalei uma galeria em meu website (Gamma Gallery) que acho que usa este mesmo sistema, cada dispositivo abre as imagens conforme a resolução mais próxima. A ideia é que em nenhum dispositivo a imagem se torne distorcida. Consegui instalar esta galeria com sucesso, mas meu projeto agora é outro, é fazer mais ou menos isto mas com um background que preenche a screen sem alterar drasticamente a velocidade do site (já que é apenas uma página de erro 404).

Agora vejamos, minha página de 404.html está assim constituída:

<html>
    <!DOCTYPE html>
<html lang="en"><!--<![endif]-->
<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
	<title>404 ERROR</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport" />
	<link href="/sources/404.css" rel="stylesheet" type="text/css" />

E o css:

body {
background-image: url(/sources/404.jpg);
background-repeat: no-repeat;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}

Agora, partindo do ponto prático, preciso deletar tudo (html e css) e criar um php, jogar aquele código adaptado que escrevi completo de media query (resposta #9) e acrescentar o !isMobile na linha 12 para que o browser (de pc) pare de ler e não leia o media query, é isso?

Desculpe pelas perguntas, estou aqui aprendendo também, é meio novo para mim esta linguagem de programação.

L. Henrique · Abril 25, 2016

Negativo, o browser de PC só para de ler se for isMobile. A exclamação antes do isMobile nega a função dele, ou seja:

isMobile = É mobile;
!isMobile = Não é mobile.

O que não for mobile, ele executa, o que for, ele não executa. Trazer todo o HTML para PHP não é difícil, seria até interessante que você começasse um projeto com PHP pra ir entendendo e aprendendo.

Lembrando que você não precisa criar uma propriedade pra cada elemento do background, você pode substituir só pela propriedade background. Exemplo:

body {
   background: url('/sources/404.jpg') no-repeat center center;
   background-size: 100% 100%;
}

O no-repeat remete ao background-repeat e o center center remete ao background-position.

Ah, eu não sei se copiou errado ou o que aconteceu, mas você está abrindo a tag <html> duas vezes no arquivo. Ele deve sempre iniciar assim:

<!DOCTYPE html> <!-- HTML5 -->
<html>
   <head></head>
   <body></body>
</html>

wig07 · Abril 25, 2016

Pois é nem tinha percebido a duplicação da tag, mas o navegador estava lendo hehe

Então, segundo o que entendi, não precisarei mexer com css, só abrir um ficheiro .php com o seguinte código?(originalmente enviado pelo pwd com adaptações da propriedade inicial (e única) de background que vc me enviou agora)

Segue:

<?php

body {
background: url('/sources/404.jpg') no-repeat center center;
background-size: 100% 100%;
}
     
     isMobile
     
    @media (min-width : 320px) {

}

    @media (min-width : 480px) {

}

    @media (min-width : 768px) {

}

    @media (min-width : 992px) {

       body{
       background-image:url(/sources/404b.png);
    }

}

    @media (min-width : 1200px) {

}

?>

wig07 · Abril 25, 2016

Mas se tirar as outras propriedades de background como associará os diferentes tamanhos? Ou você fala de outros componentes/propriedades?

Arquivado

background Como faço um background ajustável e fixo à resolução?

Recommended Posts

wig07 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

pwd 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

wig07 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

pwd 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

wig07 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

pwd 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

wig07 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

pwd 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

wig07 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

L. Henrique 179

Compartilhar este post

Link para o post

Compartilhar em outros sites

wig07 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

pwd 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

L. Henrique 179

Compartilhar este post

Link para o post

Compartilhar em outros sites

wig07 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

L. Henrique 179

Compartilhar este post

Link para o post

Compartilhar em outros sites

wig07 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wig07 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Consulta sem duplicação

Modelagem para questionário

Converter jpg para webp

Conteúdo Similar

Fóruns

Tempo Real

Informação importante