Background image positioned at '0% 0%' w.r.t screen and NOT the parent element, why?

[cutieee]

To better understand what I am saying, head over to this pen which shows the HTML & CSS code I am using (with preview).Take a look at the CSS code for the second background image:\[code\].top-navbar-channels a { background-attachment: fixed; background-color: transparent; background-image: url('http://i.imgur.com/Z1YZt.png'); background-position: 112px 8px; background-repeat: no-repeat; padding: 0 0 0 35px;}\[/code\]What I don't understand is, the background is being positioned w.r.t the screen and not the parent element. I tried \[code\]display: block;\[/code\] on the parent element and the element itself, but nothing changed.What am I missing?