Image ne montrant pas sur le défilement parallaxe

Donc, je sais que le chemin du fichier est juste que les outils de chrome me montrent tout son valide, je ne peux pas voir l'image. Je suppose que j'ai manqué quelque chose de vraiment évident.Image ne montrant pas sur le défilement parallaxe

L'intention est que les divs de la classe spacer soient opaques, vous verrez une belle image de Rome à l'arrière du site qui réapparaîtra à chaque fois que l'espaceur div sera atteint.

CSS

header { 
    width: 100%; 
    height: 100px; 
    background-color: black; 
    color: grey; 
position: absolute; 

} 

body { 
    margin: 0; 
} 

.parallax { 
    background-image: url("rome.jpg"); 

    min-height: 500px; 

    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

.content{ 
    width: 100%; 
    height: 300px; 
    background-color: black; 

} 

.spacer { 
width:100%; 
height:250px; 
opacity: 0.2; 

} 

#logo{ 
float: left; 
margin-left: 25px; 
font-size: 30px; 
margin-top: 35px; 

} 

#menu ul li { 
    color: white; 
    display:inline; 
    font-size: 25px; 
    float: right; 
    padding-right: 30px; 
    padding-left: 0px; 
    margin-top: 35px; 
    list-style-image: none; 
    } 

    li a:hover { 

    color: white; 
    } 

    a:link, a:visited { 
    color: Grey; 
    text-decoration: none; 
    } 

    @media (max-width: 732px) { 
    #menu ul li {font-size: 12px; 
    } 
#logo { font-size: 15px; 
    margin-top: 40px; 
    margin-left: 10px; 
} 
} 
@media (min-width: 946px) { 
li {font-size: 12px; 
    } 
    ul { 
    margin-right: 45px; 
    } 
}

HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name = "viewport" content= "width=device-width"> 
    <meta name = "keywords" content = "web design, mobile website, affordable design, professional website"> 
    <meta name = "autor" content = "Simon Dean"> 
    <title>Spartan Design</title> 
    <link rel = "stylesheet" href="./css/style.css"> 
    </head> 
    <body> 
    <header> 
     <h1 id = "logo"> <a href="#"> Spartan | Design </a> </h1> 

     <nav id = "menu"> 
      <ul> 
      <li> <a href="#"> Contact Us </a></li> 
      <li> <a href="#"> Portfolio </a> </li> 
      <li> <a href="#"> Home </a> </li> 
      </ul> 
     </nav> 

    </header> 


<div class="parallax"></div> 

<div class = "spacer"> 


</div> 

    <div class = "content"> 
    Shity shity shit 
    </div> 

    <div class = "spacer"> 


    </div> 

    </body> 
</html>

Source

2017-10-19 Simon Dean

-1

blocs avec z-index: 1 sont placés sur le dessus de divs avec z-index: 0, en supposant que leur position est réglée sur "relatif", "absolu" ou "fixe". À l'heure actuelle, j'ai changé le bloc parallaxe pour adapter la page (position: fixe) et placé sous l'en-tête, le contenu et les blocs elargissement:

body { 
 
    margin: 0; 
 
} 
 

 
header { 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: black; 
 
    color: grey; 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 

 
.parallax { 
 
    background-image: url(https://i.pinimg.com/736x/ff/bf/6e/ffbf6e5184f2cbae2d5c569b51f3de2d--the-colosseum-grand-tour.jpg); 
 
    min-height: 500px; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    z-index: 0; 
 
} 
 

 
.content{ 
 
    width: 100%; 
 
    height: 300px; 
 
    background-color: black; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
.spacer { 
 
    width:100%; 
 
    height:250px; 
 
    opacity: 0.2; 
 
} 
 

 
#logo{ 
 
    float: left; 
 
    margin-left: 25px; 
 
    font-size: 30px; 
 
    margin-top: 35px; 
 
} 
 

 
#menu ul li { 
 
    color: white; 
 
    display:inline; 
 
    font-size: 25px; 
 
    float: right; 
 
    padding-right: 30px; 
 
    padding-left: 0px; 
 
    margin-top: 35px; 
 
    list-style-image: none; 
 
} 
 

 
li a:hover { 
 
    color: white; 
 
} 
 

 
a:link, a:visited { 
 
    color: Grey; 
 
    text-decoration: none; 
 
} 
 

 
@media (max-width: 732px) { 
 
    #menu ul li { 
 
    font-size: 12px; 
 
    } 
 
    #logo { 
 
    font-size: 15px; 
 
    margin-top: 40px; 
 
    margin-left: 10px; 
 
    } 
 
} 
 

 
@media (min-width: 946px) { 
 
    li { 
 
    font-size: 12px; 
 
    } 
 
    ul { 
 
    margin-right: 45px; 
 
    } 
 
}

<header> 
 
    <h1 id="logo"> 
 
    <a href="#"> Spartan | Design </a> 
 
    </h1> 
 
    <nav id="menu"> 
 
    <ul> 
 
     <li><a href="#"> Contact Us </a></li> 
 
     <li><a href="#"> Portfolio </a></li> 
 
     <li><a href="#"> Home </a></li> 
 
    </ul> 
 
    </nav> 
 
</header> 
 
<div class="parallax"></div> 
 
<div class="spacer"></div> 
 
<div class="content"> Shity shity shit </div> 
 
<div class="spacer"></div>

Source

2017-10-19 11:51:32

Ne pas mettre le code seulement, élaborer votre anwser à expliquez le problème –

C'est génial merci beaucoup, puis-je demander ce que l'index z -1 fait ici? –

nvm, je l'ai googlé et c'est tellement utile de savoir! –

Image ne montrant pas sur le défilement parallaxe

Répondre

Questions connexes