javascript - CSS Background Position when using :target -

ok i've done looking around , couldn't find enough answer question.

basically i'm trying minimize websites header when button clicked.

heres css: http://emstectest.site44.com/style.css

i've been playing around trying work here's problem, i'm trying make background image, dark blue divider colour seperates header , body move when expand link clicked (using :target on #header style).

but i've tried like:

#header:target { background-position: center -300px; } 

but thing moves background image when do:

body { background: url (path) repeat-x center -300px; } 

any on appreciated. i'm holding on using javascript on due lack of knowledge in area; , fact want load times main priority.

another question be: there way animate process using -webkit- or have use javascripting again?

thanks in advance. - james

from w3schools.com

definition , usage

urls # followed anchor name, link element within document. element being linked target element.

the :target selector can used style current active target element.

@ example here

your image has fixed width of 440px if trying reduce height if you'll need adjust it's proportions.