Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

HTML5 e CSS3 II - Fundo Listrado não funciona para o blog

Olá todos,

Estava fazendo o exercício da aula 6 Gradiante do curso HTML5 e CSS3 II e me deparei com o seguinte problema. No exercício para criar fundo listrado para o backgroud do blog não consegui funcionar.

Usei o console de desenvolver do Chrome para encontrar o problema e reparei que line-gradient não funciona se você tiver o postion:relative.

Tem como funcionar os dois juntos?

.blog {
    background-color: #999;
    position: relative;
    background-image: linear-gradient(135deg, transparent, transparent 14px, rgba(0,0,0,.1) 14px, rgba(0,0,0,.1) 15px, transparent 15px, transparent);
    background-size: 20px 20px;
    background-attachment: fixed;
    color: #FFF;
    border-bottom: .5em solid #851944;
}

Obrigado

6 respostas

Oi Douglas, você tentou outro navegador? Deveria funcionar normalmente, veja, testei aqui no fórum mesmo e não tive problemas. Olha imagem abaixo:

forum listrado

É o Firefox aqui neste caso. Não pude testar no Chrome ainda.

Realmente no Firefox e no IE Edge funciona, não da certo só no Chrome.

Estranho, que versão do chrome e sistema operacional você tá usando?

Aqui eu uso a Chrome versão 67.0.3396.99 (Versão oficial) 64 bits no Windows 10 Vou testar em outro computador para ver se este comportamento se repete.

solução!

O problema no chrome pra mim foi relativo ao background-attachment: fixed; que faz as linhas acompanharem o scroll.

Obrigado pela ajuda Wanderson :)

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software