how to prevent header overlapping fixed color section?

How can I prevent the header from overlapping the image in the color section when that image is set to Fixed? When its set to Scroll it doesn’t overlap, but I would like it to be both Fixed AND below the header. Can you provide some Quick CSS to fix this? Or do I need to add extra space to the top of my image(s) in order to shift the main image down by the height of the header??

Also, how can I make the header 100% opaque on pages where transparency is set to ‘none’? I tried adding a header background via Theme Options but this thwarts the transparent header on my home page.