css - CSS3 background-position in percentage not working at all -

css - CSS3 background-position in percentage not working at all -

so i'm coding parallax effect in css3 3 layers page header. style sheet following:

#graphic-layer { /* overall properties graphic layers */ position: absolute; background-position: center center; background-repeat: no-repeat; background-size: contain; } #graphic-layer.header { /* header-class */ width: 100%; height: 150px; background-repeat: repeat-x; -webkit-animation-name: header; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } #graphic-layer.header:nth-of-type(1) { /* parallax layer 1 */ background-image: url('images/header-background.jpg'); -webkit-animation-duration: 100s; } #graphic-layer.header:nth-of-type(2) { /* parallax layer 2 */ background-image: url('images/header-middle.png'); -webkit-animation-duration: 80s; } #graphic-layer.header:nth-of-type(3) { /* parallax layer 3 */ background-image: url('images/header-foreground.png'); -webkit-animation-duration: 60s; } @-webkit-keyframes header { /* keyframes */ 0% { background-position: 0 0; } 100% { background-position: 100% 0; /* <- problem here */ } }

edit: html, 3 instances of graphic-layer class header:

<div id="graphic-layer" class="header"></div> <div id="graphic-layer" class="header"></div> <div id="graphic-layer" class="header"></div>

so far, good. note, header 100% width of screen. works fine if set background position @ keyframe 100% background-position: 1920px 0; (my screen/window width) resolution of window changes, won't work anymore. if set value lower, 500px, example, image moves 500 pixels , jumps start want continously move without "jumping".

so need solution create image move 100% of width of header , restart animation. when set background position @ keyframe 100% background-position: 100% 0; doesn't move @ all.

what problem here? why percentage values not working?

edit:

found reply myself!

it stupid error in reasoning. #graphic-layer.header doesn't have 100% of header 100% of image, static value (in case 1920px). if set width 3480px (1920x2) , alter keyframes following:

@-webkit-keyframes header { /* keyframes */ 0% { left: 0; } 100% { left: -1920px; /* <- image size */ } }

...then header class moves 1920px left , starts on 1 time again , because of doubled width of class seems endless image. no need relative percentage values!

css css3 css-animations