Using this solution, when I reduce the width of the page, using an iPod or iPad, the space between the top and the bottom of the header image expands considerably instead of remaining constant.
In order to display the header correctly in Chrome, on my desktop machine, I have set padding as 100px top and bottom, with a header margin of 20px top. Unfortunately, I believe this is causing the extra spacing, when I decrease the width of the page.
If I remove the padding completely the image appears correctly for iPod width, but does not work at desktop (Chrome) width.
Any suggestions for creating responsive headers for different pages?
R. Y. Glover & Associates
EDITORIAL AND MARKETING SERVICES
1455 McTavish Road, North Saanich
British Columbia, Canada, V8L 5T3