Menu
My code
HTML
<body>
<div class="parallax">
<div class="bg_one"></div>
<div class="bg_two"></div>
</div>
</body>
CSS
.parallax [class*="bg_"] {
position: relative;
height: 900px;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
.parallax .bg_one {
background-image: url(https://raw.githubusercontent.com/AYNesterov/data_sets/master/внутри%20пни.png);
}
.parallax .bg_two {
background-image: url(https://raw.githubusercontent.com/AYNesterov/data_sets/master/внутри%20квартиры.png);
}
293
It's a very nice idea!
I've tested your code not in a real mobil but on Chrome > inspect >toggle device toolbar (left top). This allows you to test a web page in a mobil like environment. I've made a few changes in your css and it seems to work:
.parallax [class*="bg_"] {
position: relative;
height: 100vh;
background-attachment: fixed;
background-position: top center;
background-size: cover;
}
.parallax .bg_one {
background-image: url(https://raw.githubusercontent.com/AYNesterov/data_sets/master/внутри%20пни.png);
}
.parallax .bg_two {
background-image: url(https://raw.githubusercontent.com/AYNesterov/data_sets/master/внутри%20квартиры.png);
}<div class="parallax">
<div class="bg_one"></div>
<div class="bg_two"></div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
