Image does not appear 100%

Asked

Viewed 80 times

3

I’m trying to create a LandingPage but the first image is being cut

I’m using this CSS:

.parte1 {
    min-height: 100%;
    max-height: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
    color: #f8f8f8;
    background-image: url('Images/Fundo/image1.png');
    background-repeat: no-repeat;
    background-size: cover;
}

and this div:

<div class="parte1 section">

</div>

and then the image appears cut like this:

inserir a descrição da imagem aqui

What could be wrong?

html css div

1 answer

2


  • Follow the explanation in the code:

.parte1 {
    min-height: 100%;
    max-height: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
    color: #f8f8f8;
    background-image: url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66');
    background-repeat: no-repeat;
    background-size: cover;
}

.parte2 {
    min-height: 100%;
    max-height: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
    color: #f8f8f8;
    background-image: url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66');
    background-repeat: no-repeat;
    background-size: contain;
}

.parte3 {
    height: 50px;
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
    color: #f8f8f8;
    background-image: url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66');
    background-repeat: no-repeat;
    background-size: cover;
}
O COVER ESTÁ FAZENDO O PAPEL DELE DE USAR A DIV COMO UMA MÁSCARA:
<div class="parte1 section">

</div>
<br />
O CONTAIN, NO LUGAR DO COVER, GARANTE A PRESERVAÇÃO DA IMAGEM DENTRO DOS LIMITES DA DIV:

<div class="parte2 section">

</div>
<br />
MAS SE VOCÊ CONTROLAR A ALTURA DA DIV(sabendo o tamanho máximo da imagem), O COVER NÃO SERÁ UM PROBLEMA:
<div class="parte3 section">

</div>

Browser other questions tagged html css div

You are not signed in. Login or sign up in order to post.