Dlaczego nie działa background attachment fixed dla .twophoto img ?

pytanie zadane 20 lipca 2019 w HTML i CSS przez Radek Koniarski Użytkownik (870 p.)
edycja 20 lipca 2019 przez Radek Koniarski

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,400&display=swap" rel="stylesheet">


    <script src="https://kit.fontawesome.com/d1c838dcd7.js"></script>







</head>

<body>


    <nav>

        <ul class="clearfix">
            <li><a href="#">our offer</a></li>
            <li><a href="#">our technology</a></li>
            <li><a href="#">our community</a></li>
            <li><a href="#">our creations</a></li>
            <li><a href="#">login</a></li>
            <li><a href="#">register</a></li>

        </ul>
        <div class="kreska"></div>

    </nav>



    <header>

        <div class="logo"><img src="img/1.png"> </div>
        <div class="firstphoto"><img src="img/photo1.jpg"> </div>

        <div class="naglowek1">
            <h1>Enter the world</h1>
            <button>our offer</button>
        </div>



        <div class="twophoto"><img src="img/photo2.jpg"> </div>
        <div class="naglowek2">
            <h1>The best clothes</h1>

            <a href="#">
                <p> Meet the gentleman</p>
            </a>

        </div>


    </header>
</body></html>

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body {
    font-size: 0;
    font-family: 'Source Sans Pro', sans-serif;
    height: 500vh;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

ul {}

ul li {
    display: inline-block;
    margin-top: 35px;
    list-style: none;
    width: 12%;
    margin-left: 2%;
    text-align: center;
    float: left;




}


li a {
    display: block;
    text-decoration: none;
    font-size: 22px;
    color: white;
    padding-top: 20px;
    padding: 5px;



}

li:nth-of-type(1)::after,
li:nth-of-type(2)::after,
li:nth-of-type(3)::after,
li:nth-of-type(4)::after {
    content: "";
    display: block;
    width: 0;
    height: 1px;
    background: #fff;
    transition: width .3s;
    opacity: 1;
}

li:hover::after {
    width: 100%;
    transition: width .3s;
}


li:nth-of-type(5) {
    margin-left: 10%;
    border: 1px solid white;
    transition: 1s;
}

li:nth-of-type(5):Hover {
    background-color: white;

}

li:nth-of-type(5):Hover a {
    transition: 1s;
    color: black;

}

li:nth-of-type(6) {
    border: 1px solid white;

}

li:nth-of-type(6):Hover {
    background-color: white;

}

li:nth-of-type(6):Hover a {
    transition: 1s;
    color: black;

}




/* HEADER HEADER HEADER */


.logo img {
    width: 5%;
    position: absolute;
    top: 0;
    left: 93%;
}

.kreska {
    border-bottom: 1px solid white;
    height: 4vh;
    opacity: 0.3;
}



.firstphoto {
    position: absolute;
    top: 0;
    z-index: -1;
}

.firstphoto img {
    display: block;
    width: 100%;
    height: 100vh;
    filter: brightness(80%);

}

.naglowek1 {}

.naglowek1 h1 {
    font-size: 100px;
    color: white;
    text-align: center;
    margin-top: 10vh;
    font-weight: lighter;


}


.naglowek1 button {
    position: absolute;
    display: block;
    width: 200px;
    height: 50px;
    left: 43%;
    background-color: transparent;
    border: 2px solid white;
    margin-top: 200px;
    color: white;
    font-size: 22px;
    cursor: pointer;
    transition: .6s;
    overflow: hidden;



}



button:hover {
    color: black;
}

button:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: -100%;
    top: 0;
    transition: .5s ease-in-out;
    background-color: white;
    z-index: -1;



}

button:hover:before {

    Left: 0;
}

.twophoto img {
    position: absolute;
    top: 100%;
    width: 100%;
    background-position: center;
    background-attachment: fixed;

    filter: brightness(80%);


}

.naglowek2 h1 {
    width: 100%;
    font-weight: lighter;
    font-size: 100px;
    color: white;
    position: absolute;
    text-align: center;
    top: 125%;

}



.naglowek2 a {
    width: 200px;
    height: 50px;
    top: 150%;
    left: 43%;
    padding: 10px;
    font-weight: lighter;
    font-size: 20px;
    color: white;
    position: absolute;
    text-align: center;
    text-decoration: none;
    border: 1px solid white;
    z-index: 1;
    overflow: hidden;
    margin-top: 200px;

}

.naglowek2 a:hover {
    color: black;
    transition: 1s;
}

.naglowek2 a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: -100%;
    top: 0;
    transition: .5s ease-in-out;
    background-color: white;
    z-index: -1;


}

.naglowek2 a:hover:before {

    Left: 0;
}