non-scrolling header area in foreground not background
 

i've been having the best time re-creating a clunky old non-WP site i designed a couple of years back, but now using atahualpa instead. LOVE THIS THEME! i never use any other theme, you just DON'T HAVE TO :)

i have a feeling what i'm asking may not be possible.. can't hurt to ask if anyone has any thoughts. i have a thin bar across the top of the page, which needs to stretch across the entire screen. i've put it into the background, and it looks perfect. i only wonder if there is a way to have a non-scrolling version of it in the top foreground instead of the background? (when i set it to non-scrolling in the background, of course the rest of the page scrolls all over it, which isn't the idea!)

anyway : here's the page : http://blove.ca/2011

any thoughts, please do let me know!

I'm not sure how this will work in all browsers but here is some VERY QUICK code that I hacked together to show concept. Here are the steps.

• In ATO>Body, Text & Links put padding-top to the width you want your top bar plus any space you want between it an the text below.
• In ATO>Style & edit Header Area put the following with the text you want.
  
  HTML Code:

  ---

  <div id="topbanner">This is the top banner</div>

  ---

• Put the following in ATO>Add HTML/CSS Inserts>CSS Inserts changing the colors and margins etc. as needed. I chose very large widths and negative margins to cover all screen sizes.
  
  HTML Code:

  ---

  div#topbanner {
height:50px;
background-color:#000;
width:5000px;
margin-left:-800px;
padding-left:1000px;
position:fixed;
z-index:99;
margin-top:-50px;}

  ---

  The padding right is just so the text would be seen.

I thought that perhaps this could get you thinking. You could of course use an image instead.

oh thank-you, that makes perfect sense! i can't wait to start fiddling with it :)