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

background-attachment: fixed; faz desaparecer o background

Peguei o código da solução do exercício, mas não mostra o background quando coloco background-attachment: fixed. Vocês conseguem me ajudar a achar o erro?

Segue o código:

.foto-home {
    height: 200px;
    border-radius: 50%;
}
.saudacao p {
    font-size: 1.5em;
    color: #99A;
    line-height: 1;
    padding: 2em;
}
.saudacao-inicio {
    font-size: 3em;
    color: #889;
}
.saudacao-ultima-linha {
    text-align: right;
    display: block;
}
.saudacao strong {
    font-size: 2em;
    color: #000;
}
.saudacao em {
    color: #851944;
    font-size: 4em;
    -webkit-transform: rotate(-5deg) skew(-10deg);
            transform: rotate(-5deg) skew(-10deg);
    display: inline-block;
}
.botao-index {
    font-size: 1.25em;
    background-color: #851944;
    color: #FFF;
    padding: .5em;
    border: .2em solid black;
    width: 40ch;
    margin: 2em auto;
    display: block;
    text-align: center;
}
.secao-inicio {
    padding: 2em;
}
.secao-inicio h2 {
    font-size: 3em;
    text-transform: uppercase;
    margin-bottom: .5em;
    text-shadow: 2px 2px #000;
}
.trabalhos {
    background-color: #3C1D3D;
    border-top: .5em solid #000;
    border-bottom: .5em solid #000;
    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;
}

.trabalhos h2 {
    color: #FFF;
}
.trabalhos ul {
    overflow: scroll;
    border: .5em solid black;
}
.trabalhos li {
    float: left;
    width: 33.333%;
}
.trabalhos img {
    width: 100%;
    display: block;
}
.blog {
    background-color: #999;
    position: relative;
    background-image: linear-gradient(45deg, transparent, transparent 14px, rgba(255,255,255,.1) 14px, rgba(255,255,255,.1) 15px, transparent 15px, transparent);
    background-size: 20px 20px;
    background-attachment: fixed;
    color: #FFF;
    border-bottom: .5em solid #851944;
}

.blog small {
    position: relative;
    top: -2em;
}
.blog li {
    width: 30%;
}
.blog li a {
    color: #FCF;
    padding: .5em;
    display: block;
}
footer {
    background-color: #000;
    color: #FFF;
    padding: 2em;
}
footer h2 {
    font-size: 3em;
}
footer a {
    color: #F99;
}
main {
    width: 100%;
    padding-bottom: 0;
    float: none;
}
html,body {
    overflow-x: hidden;
    height: 100%;
}
body {
    -webkit-perspective: 6px;
            perspective: 6px;
    -webkit-perspective-origin: 50% 160px;
            perspective-origin: 50% 160px;
}
.palavras-home {
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    position: absolute;
    bottom: 0;
    right: 0;
    top: 0;
    left: 0;
}
.palavra-home {
    font-family: "Shadows Into Light", cursive;
    font-weight: bold;
    font-size: 400%;
    color: rgba(255, 127, 127, .5);
    position: absolute;
}
.eficiencia {
    top: 50%;
    left: 60%;
    -webkit-transform: translate(-50%, -50%) translateZ(4px) rotate(-5deg) scale(.25);
            transform: translate(-50%, -50%) translateZ(4px) rotate(-5deg) scale(.25);
}
.boas-praticas {
    top: 70%;
    left: 20%;
    -webkit-transform: translate(-50%, -50%) translateZ(1px) rotate(10deg) scale(.25);
            transform: translate(-50%, -50%) translateZ(1px) rotate(10deg) scale(.25);
    opacity: .3;
}
.codigo-limpo {
    top: 45%;
    left: 25%;
    -webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(-10deg) scale(.25);
            transform: translate(-50%, -50%) translateZ(2px) rotate(-10deg) scale(.25);
    opacity: .6;
}
.css3 {
    top: 55%;
    left: 35%;
    -webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(5deg) scale(.25);
            transform: translate(-50%, -50%) translateZ(2px) rotate(5deg) scale(.25);
    opacity: .6;
}
.html5 {
    top: 30%;
    left: 65%;
    -webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(10deg) scale(.25);
            transform: translate(-50%, -50%) translateZ(2px) rotate(10deg) scale(.25);
    opacity: .6;
}
.javascript {
    top: 15%;
    left: 60%;
    -webkit-transform: translate(-50%, -50%) translateZ(1px) rotate(-5deg) scale(.25);
            transform: translate(-50%, -50%) translateZ(1px) rotate(-5deg) scale(.25);
}
.acessibilidade {
    top: 30%;
    left: 35%;
    -webkit-transform: translate(-50%, -50%) translateZ(3px) rotate(-5deg) scale(.25);
            transform: translate(-50%, -50%) translateZ(3px) rotate(-5deg) scale(.25);
    opacity: .8;
}
.responsivo {
    top: 40%;
    left: 40%;
    -webkit-transform: translate(-50%, -50%) translateZ(3px) rotate(10deg) scale(.25);
            transform: translate(-50%, -50%) translateZ(3px) rotate(10deg) scale(.25);
    opacity: .8;
}
.otimizacoes {
    top: 70%;
    left: 65%;
    -webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(-5deg) scale(.25);
            transform: translate(-50%, -50%) translateZ(2px) rotate(-5deg) scale(.25);
    opacity: .6;
}
.agilidade {
    top: 75%;
    left: 35%;
    -webkit-transform: translate(-50%, -50%) translateZ(1px) rotate(5deg) scale(.25);
            transform: translate(-50%, -50%) translateZ(1px) rotate(5deg) scale(.25);
    opacity: .3;
}
.design {
    top: 40%;
    left: 60%;
    -webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(10deg) scale(.25);
            transform: translate(-50%, -50%) translateZ(2px) rotate(10deg) scale(.25);
    opacity: .6;
}
.titulo-principal {
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    position: relative;
}
.banner-twitter {
    position: absolute;
    top: 0;
    right: 0;

    line-height: 1;

    /* largura = 14em */
    /* altura = 3.5em */
    /* tx = .707 * h - .707 * w + w */
    /* ty = -.707 * h */
    -webkit-transform: translate(6.5765em, -2.4745em) rotate(45deg);
            transform: translate(6.5765em, -2.4745em) rotate(45deg);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;

    width: 14em;
    padding: 1em 0;
    box-sizing: border-box;

    text-align: center;
    text-decoration: none;
    background-color: #3C1D3D;
    color: white;
    border: .25em solid black;

    font-size: 1.2em;
    font-family: "Open Sans Condensed", sans-serif;
}
.blog .inicio-post {
    position: absolute;
    top: 4em;
    height: 8em;
    left: 30%;
    right: 4em;
    background-color: #F2FFFC;
    color: #000;
    padding: 1.5em;
}
.blog .mais-recente {
    background-color: #F2FFFC;
}
.blog .mais-recente a {
    color: #F26;
}
4 respostas
solução!

Oi Diego, tudo certo?

Joguei seu código nesse Jsbin, e não encontrei o erro.

Acredito que pelo gradiente usado ser bem tênue, não conseguimos ver a diferença, mas quando alterado para algo mais "na cara", como alterei para red e blue, aí sim conseguimos ver o resultado.

Espero ter ajudado,

Abcs!

Oi Natan, blz?

Então, eu abri a página em outro computador e o backgroundapareceu sem fazer nenhuma alteração. Acredito que foi o que você comentou mesmo, por ter as linhas muito finas, acaba não sendo visível, mas acho que está mais relacionado a configuração do monitor.

Agradeço por ter dedicado seu tempo em responder a minha dúvida!

Obrigado!

Impossível! Esse segundo código do gradiente da parte "blog", não aparece nada! só fica branca!

background-image: linear-gradient(45deg,
        transparent,
        transparent 14px,
        rgba(255, 255, 255, 0.1) 14px,
        rgba(255, 255, 255, 0.1) 15px,
        transparent 15px,
        transparent);
    background-size: 20px 20px;
    background-attachment: fixed;

Ja tentei ver no note, na tv. Somente o código a parte "trabalhos" é válido, e reproduz o fundo com "riscos" cinzas.

agora a parte blog, fica totalmente branca. Acredito que o rgba apresentado na aula, esta errado, ou são os tamanhos dos gradientes.

Oi Rodolfo, tudo bem?

Peguei seu código e joguei nesse Jsbin, mas adicionei um bg-color black.

Repare que está fazendo as linhas diagonais.

Qualquer dúvida pode abrir outro tópico que a comunidade Alura ajuda, ok?

Abcs!

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