I have a centered background .png image (#logo-fire) that I want to follow with a list item (#logo) on my menu when scaled.
It looks and works just fine at 1024px and above, but once I start scaling the window down, the background image (#logo-fire) and list item (#logo) start drifting apart. My idea was to have both of them in sync, that way the list item will always be clickable no matter the window size.
Is it possible for the background image to position itself as though its only 128px in width, but display at 1024px (w/ overflow:hidden) ?
B) Break up the rocket (128px) + fire (1024px) and somehow get the two to move in sync? Throw a hot empty div on top of the 128px rocket and have the rocket + fire (1024px) as a background image that follows the empty div. Tried it without success.
If the rocket is always in the center of the page (barring any media queries) then the fire could be placed as a bg of the body and centered using background-position.