I am currently doing my website and have an issue with the fixed header div. So far I have got it to stay centred within the screen, and also be 25px from the top of the screen. However, When I scroll down the page, the header div stays where it is (as expected) but the content scrolls behind it and then shows in the '25px' margin that is at the top of the div to take it away from the top of the screen. I only want the background pattern to show in that area at the top?
Is there a way to do this, I have searched everywhere for a solution!
Only way I found was to use an image for the background pattern at the top but it never seems to line up so looks dreadful...
Any help would be amazing as this is driving me crazy!
I also have an issue with the iPad where when I zoom in, it separates the header and the content... no idea why this is being done, is it possible to stop zoom altogether through pinching?
Google wasn't very useful in finding a solution. Everything I tried just didn't work
Website is located at: