I have made a codepen to explain my problem:
- When the user scroll, the blue images should follow the user scroll
- The blue images should be stuck on the opposite side of the aside parts (right for the left one | left for the right one)
The pb is that
background-attachment : fixed;
isn't working this the css rule
background-position: left 0px;
Someone can help me by forking the codepen to show me a working implementation ?
.wrapper {
display: flex;
}
main {
background-color: red;
height: 1000px;
max-width: 992px;
width: 100%;
}
aside {
min-width: 150px;
background-color: green;
}
.left {
background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
background-repeat: no-repeat;
background-position: right 0px;
/*background-attachment: fixed; Doesn't work*/
}
.right {
background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
background-repeat: no-repeat;
background-position: left 0px;
/*background-attachment: fixed; Doesn't work*/
}<div class="wrapper">
<aside class="left"></aside>
<main></main>
<aside class="right"></aside>
</div>