After conducting some research, I was unable to find a satisfactory answer to my question.
Essentially, I am attempting to shrink my website's header when a button is clicked.
Here is the CSS code:
I have been experimenting with making the background image, which is a dark blue divider that separates the header and body, move up when the expand link is clicked (using :target in the #header style).
However, I have tried something like this:
#header:target { background-position: center -300px; }
but the only way I can get the background image to move is by doing this:
body { background: url (PATH) repeat-x center -300px; }Any assistance on this matter would be greatly appreciated. I am hesitant to use Javascript due to my limited knowledge in that area and also because I prioritize loading times.
Another question I have is whether it is possible to animate this process using -webkit- or if I need to resort to using Javascript?
Thank you in advance. - James