Question

I found some great help on this site that helped me tile an image on either side of my fixed header. One issue I am having is the scroll bar on the right is being covered by the tiled image and becoming inaccessible. I am sure it is something simple but I am at a loss at the moment. You can view an example here: http://www.jzandecki.com/example

Answer 1

You’ll need to rebuild your header from scratch. First of all create a div (this will be your header container), name it with id let’s say “header”. Add as a background your tiled black image. The position of that div should be FIXED and not ABSOLUTE.

position: fixed;
background: url("../images/example_top.jpg") repeat scroll 0 0 transparent;
background-repeat: repeat-x;
height: 178px;
width: 100%;

In your header div add another div having for width size the width of your power plant image. Set the css of this div to margin: auto (to center it in the screen).

margin: auto;

This should do the job.
If this works you should have the same view you had before but your scroll bar will be on top of your header and not hidden.

Edit:

By the way I saw your body is 900 px and sticks on the left of the screen. I recommend you to have the following attribute for your body:

margin: 0;
padding: 0;

The body should occupy the whole page.
If you want a 900 px wrapper block for your content add a div AFTER your header div (described above). This new div should have the following css attributes:

width: 900px;
margin: auto; //this centers your div in the middle of your screen
//Other styles that have nothing to do with positioning 

Good luck.