Top image covering sidebar

**ModernRevolutions** · 06-17-2011, 02:38 AM

So here is my website: http://www.modernrevolutions.net. But on smaller resolutions or if you actually make the browser window smaller, it moves the top image to make it the center of your window, however for some reason it actually starts to cover the sidebar. I've tried adding:

Code:

z-index:0;

to the header div code and even adding

Code:

z-index:100;

to the sidebar code. But it didn't work. Here is a screenshot of what I am talking about: http://i52.tinypic.com/rh34u9.jpg. Can someone please help me? Thanks!

**ModernRevolutions** · 06-17-2011, 11:32 PM

Anyone? It doesn't seem difficult but im not the brightest one when it comes to codes

**ModernRevolutions** · 06-22-2011, 05:33 PM

Anyone have ANY ideas? D:

**deathbycheese** · 06-24-2011, 07:21 PM

I can't seem to duplicate the problem. Got a screenshot?

**deathbycheese** · 06-24-2011, 07:25 PM

how about if you set the image to be the background of your "header" div rather than an image within the div?
Also try specifying an exact height in the CSS for that div.

**ModernRevolutions** · 06-26-2011, 05:19 AM

Well I already have a background for that div, its the repeat-x background image. Also, there is a screen shot in my first post. As you can see its covering have of the "Search" header

**deathbycheese** · 06-26-2011, 06:31 AM

try specifying an actual height for the image. Oh, and z-index:-1 on your header div might help if you don't want the picture to be it's background.

**ModernRevolutions** · 06-26-2011, 05:35 PM

I did try setting a height and also tried the -1 z index, still nothing D:

**auntnini** · 06-26-2011, 08:45 PM

Oh, boy! It's hard to see what is what because so much stuff is in there. Why are all your internal site references ABSOLUTE URLs?

I tried  and noticed HEADER has a % width and other elements do not. At one point when reducing the window size, the links cover up the Search side bar. Maybe getting a CLEAR: BOTH style or <br clear="all" /> in there would prevent that overlap.

I'd create a WRAP div to encompass ALL the content and give it a width: 95%; min-width: 800px; max-width: 1000px; (or some such) and do the same with the image and other content -- such as done at http://www.gerigeans.com to shrink the image in proportion to window size. Kaley.jpg is 800px wide; it could be background-image for WRAP.

Alternatively,if you can give up #header background-image: url(kaleyRepeat.jpg); or make it a PNG-24 with alpha, have html { margin: 0; padding:0; background: #dedede url(Kaley.jpg } no-repeat center 10px; } and make body, wrap, #header { background: transparent: }