2

Eu tenho uma parte no meu site onde preciso colocar uma imagem de fundo ocupando a tela inteira, tanto com largura quanto com altura. Eu consegui fazer isso com css.

.intro {
  display: table;
  width: 100%;
  height: 100%;
  padding: 100px 0;
  text-align: center;
  color: white;
  background: url(../img/Banner-Site.png) no-repeat bottom center scroll;
  background-position: 30% 45%;
  background-color: black;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

Mas o problema é que isso acaba estourando a imagem, ou seja, eu perco a resolução e nitidez da imagem. Já tentei colocando a imagem num tamanho maior, mas não resolve.

Eu tenho um monitor com uma resolução de 2560 x 1080. Testei colocando as imagens num tamanho de 3000 x 1000. E em tamanhos menores também. Todas as imagens são em PNG, salvas no Photoshop como arquivo para web.

Alguém pode me ajudar?

5
  • coloque as informações da imagem também. tamanho, peso e formato.
    – RFL
    9/02/2017 às 17:27
  • Eu tenho um monitor com uma resolução de 2560 x 1080. Teste colocando as imagens num tamanho de 3000 x 1000. E em tamanhos menores também. Todas as imagens são em PNG, salvas no Photoshop como arquivo para web.
    – Wess
    9/02/2017 às 17:31
  • Já usou um max-width:100%; ? 9/02/2017 às 17:32
  • Ja tentei, eu colocando max-width:100%; a imagem some e fica tudo branco.
    – Wess
    9/02/2017 às 17:36

2 Respostas 2

2

Você quer na verdade que a imagem ocupe o viewport todo? Se sim tem uma unidade de medida relativa, que é bastante usada no design responsivo. O vh e vw.

Muitas técnicas de web design responsivo dependem muito de regras percentuais. No entanto, medidas CSS percentuais nem sempre são a melhor solução para todos os problemas. width em CSS é relativo ao elemento-ancestal mais próximo. Mas e se você quisesse usar a largura ou a altura da viewport ao invés da largura do elemento-pai? Isso é exatamente o que as unidades vh e vw proporcionam.

A medida vh é igual a 1/100 da altura da viewport. Então, por exemplo, se a altura do navegador é 900px, 1vh equivale a 9px e, analogamente, se a largura da viewport é 750px, 1vw equivale a 7.5px.

Há infinitas possibilidades de uso com essas unidades. Por exemplo, “sliders” de altura total (full-height) poderia ser conseguido com uma única linha de CSS:

.slide {
    height: 100vh;
}

FONTE:http://desenvolvimentoparaweb.com/css/unidades-css-rem-vh-vw-vmin-vmax-ex-ch/

* {
  padding:0;
  margin:0;
}
.intro {
  display: table;
  width: 100%;
  height: 100vh;
  padding: 100px 0;
  color: white;
  background: url('http://lab27.blob.core.windows.net/wordpress/2016/05/css-code.jpeg') no-repeat bottom center scroll;
  background-position: 30% 45%;
  background-size: cover;
}
<div class="intro"></div>

2
  • 1
    Desse jeito deu certo @Gilmar. Muito obrigado pela ajuda.
    – Wess
    9/02/2017 às 18:42
  • 1
    Muito bem explicado Gilmar !! Muito Obrigado. 16/12/2017 às 13:47
0

Olá! Quero ajudar, mas preciso de um pouco mais de informação. Vi que você forneceu as informações sobre a imagem. Mas eu aqui mesmo com uma imagem aleatória da internet não tive problemas com o código e me pareceu normal. Teria como fornecer a imagem? Ou descrever o que está tentando fazer? Você quer cobrir a tela inteira com a imagem? Desculpe botar aqui em forma de resposta, mas não tenho permissão para comentar.

EDIT

Se for para ocupar a tela inteira, precisa ser em display: table?

Assim funcionaria:

.intro {
    display: block;
    width: 100vw;
    height: 100vh;
    padding: 0;
    text-align: center;
    color: white;
    background: url(../img/Banner-Site.png) no-repeat bottom center scroll;
    background-position: 30% 45%;
    background-color: black;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

EDIT 2

Se a imagem for grande o suficiente, você pode substituir o cover por contain. Há menos possibilidade de distorção. O cover força a imagem a caber por inteira na tela, já o contain encaixa ela da melhor forma possível.

Pessoalmente recomendo uma imagem bem mais larga do que alta para desktop e uma versão mais alta do que larga para mobile. E desta forma use o contain para não distorcer.

EDIT 3

body {
    margin: 0;
}
.intro {
    display: block;
    width: 100vw;
    height: 100vh;
    padding: 0;
    text-align: center;
    color: white;
    background: url(../img/Banner-Site.png) no-repeat bottom center scroll;
    background-color: black;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    background-size: contain;
    -o-background-size: contain;
}

Essas tarjas nas laterais eu teria que ver na sua imagem, pois aqui não estou conseguindo simular, mas a princípio eu imagino que possa ser da margem criada pelo body. Mas em questão a responsividade, por isso eu disse de fazer versões. Você teria que trabalhar com Media Queries e versões da mesma imagem para se adaptar melhor pra mobile ou tablet. Talvez esta parte seja melhor você pesquisar um pouco sobre para entender melhor, mas o que elas fazem é adaptar o seu CSS para diferentes tipos de telas, como: smartphones e tablets.

5
  • Então @LeonVFX, fiz o teste aqui colocando o 'display: block' e tirando o cover e colocando o 'contain'. Alteramos a imagem aqui numa resolução bem maior, e salvando a imagem em 32 bits, png. Fazendo desse jeito a nitidez e resolução da imagem ficou perfeito, porém ela não esta tela inteira, mesmo eu salvando a imagem numa resolução de '2800 x 1300'. Ele fica com as laterais com "tajas pretas" E desse jeito também tive problema com o responsivo, quanto menor, menos espaço ocupado ele tem, sendo que eu preciso que ele preencha tudo, mesmo no responsivo.
    – Wess
    9/02/2017 às 18:08
  • E deu tudo certo? Só não recomendo salvar em png a não ser que vá haver transparência, pois pesa bem mais do que um jpg. 9/02/2017 às 18:09
  • Fazendo desse jeito a nitidez e resolução da imagem ficou perfeito, porém ela não esta tela inteira, mesmo eu salvando a imagem numa resolução de '2800 x 1300'. Ele fica com as laterais com "tarjas pretas" E desse jeito também tive problema com o responsivo, quanto menor, menos espaço ocupado ele tem, sendo que eu preciso que ele preencha tudo, mesmo no responsivo.
    – Wess
    9/02/2017 às 18:14
  • Veja meu EDIT 3! :) 9/02/2017 às 18:26
  • Então @Leon, eu testei aqui colocando o 'width: 100%; height: 100vh;' e voltei para cover ae deu certo. Não consegui colocar a imagem 100% nitida, mas melhorou pra uns 95%. E esta preenchendo a tela toda. Muito obrigado pela ajuda.
    – Wess
    9/02/2017 às 18:42

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 .