Centralizar uma imagem de fundo

StackOverflow https://stackoverflow.com/questions/1765784

  •  21-09-2019
  •  | 
  •  

Pergunta

enter image description here

Por favor, dê uma olhada na foto da tela acima, eu gostaria de centralizar uma imagem com fundo preto, mas estou recebendo um pouco de espaço em branco na parte inferior. Por favor, alguém poderia me ajudar a consertar isso.

CSS

.bgimg {
    background: url('../images/GBS-Chronicle-Background-1.png') black no-repeat center;
}
div#cont {
    height: 672px;
}

Html 

<body class="bgimg">
<div id="doc2">
    <div id="hd"></div>
    <div id="bd">
        <div id="cont">
            <div class="middle">
                <p> hi hello </p>
            </div>
        </div>
    </div>
    <div id="fd"></div>
</div>
Foi útil?

Solução

Tente adicionar isso:

html,body { height:100%; }

Outras dicas

Tente configurar height:100%; Nas suas .bgimg classe.

Editar: Você também pode querer definir padding:0;margin:0; para o seu .bgimg classe também apenas para ter certeza.

Eu acho que o GBS-Chronicle-Background-1.png não é alto o suficiente. Você pode adicionar a cor de fundo ao preto ou repetir a imagem junto com Y.

Tente alterar a ordem da sua regra de segundo plano para que a cor venha primeiro.

background: black url('../images/GBS-Chronicle-Background-1.png') no-repeat center;

Experimente isso também (como foi sugerido acima):

corpo {cor:#000000;}

Além disso: sugiro comentar a altura do seu conteúdo div. E/ou definir a cor BKG da div e a mesma cor que o corpo. Espero que ajude! :)

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top