Entrar Ainda não tem acesso?
2
respostas

background-attachment: fixed || problema

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Gradientes e atividade Gradientes

por Alexander Bassani Amaral
| 169.3k xp | 96 posts
Eng. de Computação

quando eu apliquei o background-attachment: fixed;, somente metade da area foi afetada pelo background-image: linear-grandiente(); como na imagem a seguir

https://i.pinimg.com/originals/24/51/1d/24511dae08da3b827f1e51018684af80.png

alguém saberia me dizer o que fiz de errado ?

código CSS

.trabalhos {
    background-color: #3C1D3D;
    border-top: 10px solid #000;
    border-bottom: 10px solid #000;
    background-image: linear-gradient(135deg, transparent, transparent 14px, rgba(0,0,0,0.1) 14px,rgba(0,0,0,0.1) 15px, transparent 15px, transparent);
    background-size: 20px 20px;
    background-attachment: fixed;
}

código HTML:

<section class="secao-inicio trabalhos">
            <h2>Trabalhos</h2>
            <ul id="img-trabalhos">
                <li><img src="img/bmw.png" alt="Site da BMW"></li>
                <li><img src="img/ibm.png" alt="Site da IBM"></li>
                <li><img src="img/uol.png" alt="Site da UOL"></li>
            </ul>
            <a class="botao-index" href="portfolio.html">Veja mais</a>
        </section>
2 respostas
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Fala Alexander, tudo bom?

Em algum outro ponto do css, você definiu um size para o background?

fiz um teste nessa URL e aparentemente funcionou certinho

https://codepen.io/soutomario/pen/VrZwBN

por Alexander Bassani Amaral
| 169.3k xp | 96 posts
Eng. de Computação

não encontrei nenhum background-size no meu index.css relacionado a área de "trabalho"

todos os codigos css relacionado ao "trabalho":

.trabalhos {
    background-color: #3C1D3D;
    border-top: 10px solid #000;
    border-bottom: 10px solid #000;
    background-image: linear-gradient(135deg, transparent, transparent 14px, rgba(0,0,0,0.1) 14px,rgba(0,0,0,0.1) 15px, transparent 15px, transparent);
    background-size: 20px 20px;
    background-attachment: fixed;
}
.trabalhos h2 {
    color: #FFF;
}
.trabalhos ul {
    overflow: hidden;
    border: 10px solid black;
}
.trabalhos li {
    float: left;
    width: 33.333%;
}
.trabalhos img {
    width: 100%;
    display: block;
}
#img-trabalhos{
    width: 80%;
    margin-left: 9%;
}

não sei o que ocorre, mas só apresenta esse erro quando eu adiciono o "background-attachment: fixed;" no código, sem ele as listras aparecem normalmente.

github do projeto: https://github.com/Norion09/alura-projeto-html.git