2

Overview: I have a CSS3 pure navigation system on top of my page. I have a footer/copyright on bottom.

In the middle, I want a background image (parchment) cover, then on top of that parchment, I want a white layer for text with a left column and a right column. I can't seem to make it work using the relative position as my z-index doesn't seem to be working. If I put position "fixed", I can't use the right browser scroll anymore to go down. If I use position "absolute", then the background is right and the content on top is ok, but my navigation footer disappears. If I use position "relative", my navigation system is fine but the background doesn't show up anymore. It is ignoring the z-index....

The weird thing is I am using expression web 4 and it looks correct there...it just doesn't look correct on the web.

This is my site html to reproduce what I am seeing.

<!-- #BeginEditable "content" -->
<div id="page_content_back">
    <div id="column_left">
        <h1>About</h1>

        <p>We are the best-Trust us</p>


    </div>
    <div id="column_right">
        <h4>CONTACTS</h4>
    </div>          
</div>
<!-- #EndEditable -->

This is my css 

#page_content_back {
position: relative;
background-image:url('../images/grayparchment_back.jpg');
background-size: cover; 
z-index: 1;
width: 100%;
margin: auto;
padding: 0;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCAA77;
}
#column_left {
position: relative;
margin: 0 50px;
padding: 0 2%;
z-index: 2;
top: 0px;
background-color: #fff;
float: left;
width: 65%;
height: 100%;   
color: #393939;
}
#column_right {
position: absolute;
z-index: 3;
float: right;
right: 50px;
top: 370px;
width: 20%;
height: 100%;
margin: 0;
padding: 10px;
background-color: #fff;
}
Michael Barber
  • 167
  • 1
  • 3
  • 16

1 Answers1

1

Okay, the problem is your div#column_left. It has a float: left property. Floating an element takes it out of the flow, so there's nothing within the div#page_content_back to give it any height. Remove that float: left property from the inner div and you'll see the image appear behind it. From there, you can add other elements after that nested div and the image will expand to encapsulate the new element. That said, if you use float or position: absolute, you're removing the element from the flow and that background image won't respond to its presence as a result.

Gray Spectrum
  • 723
  • 2
  • 7
  • 21
  • Well, yes, you are right. When I set it to min-height: 100px; It is working great for the first 100px. If I set instead height: 100%; It stops working again. How do I get it to work for the whole page when I have no idea what the "height" of the page will be since I'm trying to template the whole website this way? I tried Height: auto; as well but that seems to yield the same result of 100% and it doesn't show up at all. – Michael Barber May 20 '14 at 18:50
  • That won't work because I'm not looking to make that parchment the entire html. ONLY, the middle portion of the website. However, if I completely redefine page_content_back for your code (calling it page_content_alt), it still doesn't work. You can actually see it running here-> http://www.salescart.com/test.htm I even put a border around it to see it and ensure the location of exactly "where" the layer is. – Michael Barber May 20 '14 at 20:11
  • Now...it could be because I'm looking at it with IE. Let me go and grab another browser. – Michael Barber May 20 '14 at 20:19