Picture does not appear 100%

Question

Picture does not appear 100%

Navigation

#1 by (2 votes)

3

I'm trying to create a LandingPage but the first image is being cropped

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 there the image appears cut like this:

What could be wrong ?

html css div

asked by anonymous 11.12.2016 / 15:05

1 answer

How to identify in the constructor the method that was called? How to apply html to text found in javascript?

score 2 · Accepted Answer

The explanation in the code follows:

.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>