CODEWITHSUNDEEP
jquerycss
Claudio
Claudio

Reputation: 904

Scroll background in fixed element?

I'm trying to get the background of my fixed element to move (change background-position)
while scrolling the page down.

FIDDLE

I've made a small animation to demonstrate the effect I want.

CODE:

#nav-container {
position: fixed;
top: 0;
left: 0;
box-shadow: 5px 2px 3px gray;
background: url('triangular.png');
background-attachment: fixed;
height: 200%;
width: 142px;
z-index: 8;
/*animation: movebg 1s infinite linear;
-webkit-animation: movebg 1s infinite linear;*/
}

@keyframes movebg {
0% {background-position: 0 0;}

100% {background-position: 60px 60px;}

}

@-webkit-keyframes movebg {
0% {background-position: 0 0;}

100% {background-position: 60px 60px;}

}

<body class="pure-u-1">

    <div id="bg-container">
    </div>

    <div id="nav-container">

        <span id="logo-nav">

        </span>

        <nav id="nav">
            <li>
                <a href="#etusivu">Etusivu</a>
            </li>
            <li>
                <a href="#tietoa">Tietoa Meistä</a>
            </li>
            <li>
                <a href="#hinnasto">Hinnasto</a>
            </li>
            <li>
                <a>Yhteystiedot</a>
            </li>
        </nav>

</div>

<div id="wrapper" class="pure-u-1">

<div id="sivu-1" class="pure-u-1">

<div id="logo">

&nbsp;

</div>

<img src="kuntosali.jpg" class="pure-img"></img>

<!--
<video autoplay id="bgvid" src="kuntosali.mp4" type="video/mp4">
</video>
-->

</div>

<div id="sivu-2">
<span>
    - "Keski-Uudenmaan uusin ja nykyaikaisin kuntosali" -
    </span>
</div>

A CSS3 solution, if possible, is appreciated.
If not, jQuery is a secondary option.

Upvotes: 1

Views: 579

Answers (1)

ZeroWorks
ZeroWorks

Reputation: 1638

Maybe this is what you need: I've put an absolutely positioned background that heights the entire page and then put fixed item over.

JSFIDDLER

body {
    position: relative;
    height: 100%;
    padding: 0;
    margin: 0;
}

* {
    margin: 0;
}

#bg-container {
    position: absolute;
    height: 100%;
     padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    box-shadow: 5px 2px 3px gray;
    background: url('http://i.imgur.com/gsXrvJ8.png');
    width: 142px;
    z-index: 2; 
}

#nav-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 142px;
    height: 200%;
    z-index: 8; 
}

Hope it helps!

Upvotes: 1

Related Questions