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.