Forums

Toad

Like the title says, I'm trying to palce an image behind a div that holds the site's main content. There are multiple layers, the body which has a pattern background, a frame that holds the navigation links and creates a border around the main content also with a pattern background, and then the content area with a white background. I want the image on top of the frame, but behind the content area, the idea being to get the image peaking out from the upper right corner. I've got it working the way I want using position:relative and z-index:-1, but of course this leaves some space on the page that I don't want. However, with position:absolute the image is either on top of everything or below all of my divs.

Here is a link to the site for reference in case my description is unclear: stafford.hostei.com

Any tips on getting this to work properly?

paintba11er89

Can you provide a JSFiddle or something? May just come down to the ordering of your elements in HTML and your z-indecies.

Toad

Sure, here's some of the code.

Pertinent CSS:


body {
  background-image:url('background.png');
}

#frame {
  width:1024px;
  margin-left:auto;
  margin-right:auto;
}

#base {
  background-image:url('blackstripes.jpg');
  width:1024px;
  height:auto;
  border:5px solid white;
}

#main {
  position:relative;
  bottom:250px;
  background:white;
  width:950px;
  margin-right:auto;
  margin-left:auto;
  border:5px solid silver;
  box-shadow: 10px 10px 5px black;
}

#content {
  width:90%;
  margin-left:auto;
  margin-right:auto;
}

#mic {
  position:relative;
  left:875px;
  bottom:100px;
  z-index:0;
}

#sound {
  position:relative;
  left:327px;
  bottom:175px;
  z-index:0;
}

HTML:


<div id='frame'>
<div id='base'>
<ul>
\\navigation menu
</ul>

<br />
<br />
<br />
<br />
<img id='mic' src='mic2.png' alt="" />
<img id='sound' src='sound.png' />

<div id=main>
<div id=content>
\\content content content
</div>all divs closed

paintba11er89

1. Do away with the <br /> tags, you can position everything using CSS.
2. Seems your positioning is a little counter-intuitive.
3. The default z-index is 0 (I think) so it doesn't look like you're doing anything there..
4. Base and frame look redundant, so I took one of them out, you can re-add it if it is really necessary.

Try this:
HTML:

<div id="base">

 	 <nav>
  	 	 <ul>
 	 	 	 //navigation menu
 	 	 </ul>
 	 </nav>

 	 <img id="mic" src="mic2.png" alt="" />
 	 <img id="sound" src="sound.png" />

 	 <div id="content">
	 	 \\content content content
 	 </div>
</div>

CSS:

body {
	 background-image: url('background.png');
}

#base {
         position: relative;
         z-index: -2;
	 background-image: url('blackstripes.jpg');
	 margin: 0 auto;
	 width: 1024px;
	 border: 5px solid white;
}

nav {
	 padding: 20px 0 20px 20px;
}

#mic {
	 position: absolute;
	 right: -20px;
	 top: -5px;
         z-index: -1;
}

#sound {
	 position: absolute;
	 right: 30px;
	 top: -10px;
         z-index: -1;
}

#content {
	 background: white;
	 padding: 20px;
	 width: 950px;
	 margin: 0 auto;
	 border: 5px solid silver;
	 box-shadow: 10px 10px 5px black; /* you need to have vendor prefixes on this */
}

I've added more padding and stuff, so that way you're not relying on divs on divs on divs and br's for layouts. Streamlined the code. This should work as it stands, but if it doesn't, play around with the z-indecies. Add a z-index of 0 to #base and nav, a z-index of 1 to #mic and #sound, and a z-index of 2 to #content.

EDIT: I forgot quotation marks on the content div id, and forgot to set the div#base as position: relative; oops! Fixed.

EDIT2: Solved the issue. Added the necessary z-indicies. Reasoning is below.

Toad

Thanks for the help and code cleaning paintba11er89, I really appreciate it.

I don't really understand why the z-index of 0 worked, but it's the only option that actually gave me the effect I was looking for with relative positioning.

I think I added the extra divs of #base and #frame in an attempt to create more layers to throw on top of or behind my image.

I tried incorporating your code into what I had, including adding the z-indicies you noted, but to no avail. I then just copied your code verbatim into a new html doc, and still no luck. The only thing that seemed to work for z-index with absolute positioning is -1, but that places the image too far back.

What's interesting though, is that if I use a 1 for #sound and 0 for #mic, the #sound image is on top of the #mic image and vice versa when I flip them. So z-index obviously functions with absolute positioning. I think it might have something to do with the use of "background" in my css. I'm gonna do some more trial and error and will post back what I find.

paintba11er89

Can you give a screenshot of what is happening?

paintba11er89

Alright. Sorry. Fixed it. My apologies.

Z-indecies only work on elements that are not positioned staticly (default).
So the content div automatically has a z-index of 0, and you can't change it until you position it relatively.
In order to not have to add the least amount of code, we just make the other z-indicies lower (negative).
We fix this by setting the base div as z-index: -2; and the images as z-index: -1;

I'm reflecting those changes in the code I provided you above (as well as fixing two errors I made previously).

Toad

Works perfectly! Exactly what I'm looking for. Thank you for all your help.

treehouse : what would you like to learn today?

Forums

[Solved] Placing image behind a div w/ background pattern