Hi everyone, I'm currently in the process of creating a new background design for my website and I want to add some animation to it. You can view my progress here:
One issue I am facing is that the "background" div does not remain fixed when scrolling down the page. I have tried various methods but can't seem to make it work.
This is what my CSS code looks like:
body {
background-color: #0a0a0a;
color: #a2a2a2;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.4;
margin: 0;
padding: 0;
background-image: url(http://wow-x.com/board/images/blackevo4-pure/background.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#background {
background: url(http://wow-x.com/board/images/blackevo4-pure/back1.jpg);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
opacity:0.1;
z-index:-1;
}
#midground {
background: url(http://wow-x.com/board/images/blackevo4-pure/midground.png) repeat 20% 20%;
background-attachment:fixed;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index:-2;
height:100%;
width:100%;
}
#foreground {
background: url(http://wow-x.com/board/images/blackevo4-pure/foreground.png) repeat 90% 110%;
background-attachment:fixed;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index:-3;
height:100%;
width:100%;
}