Image Overlapping using <div>

Get Started
1

Hi,

I am trying to make these three divs overlap, two of them are images and the other one is my contentbox.

I am trying to make this fading wood image overlap the original wood image, but not affecting the position of the contentbox. So in other woods, I want the contentbox to have the same padding-top in the “Original Wood Image” in the “Fading Image with Original Wood Image”

Fading Image:

800×73 32.4 KB

Original Wood Image:

800×307 25.5 KB

Fading Image with Original Wood Image:

800×381 29.4 KB

Here is my coding:

<div id="center" class="body">
<div class="contentbox">
<div class="information">
<h1>heading</h1>
    <hr />
	<div><p>Unofficial Rules</p></div>
    <h3>Important Note Regarding World Records</h3>
		<div><p>This is an International Land-Based Shark Fishing Association (ILSFA) sanctioned event. Therefore, anglers interested in submitting catches made during the tournament for official world records are encouraged to become familiar with those requirements.</p></div>
    <br />
    <br />
    <br />
</div>
</div>
</div>

Here is my CSS:

#center {
 	margin-left: auto;
 	margin-right: auto;
 	width: 800px;
 	}
div.body {
	margin:0em;
	padding:0em;
	color:#676556;
	font-family:"Times New Roman", Times, serif;
	font-size:0.8125em;
	text-align:center;
	font-weight:bold;
	vertical-align:text-top;
}
div.contentbox {
	background-image:url(../graphics/contentbox_img.gif);
	background-attachment:scroll;
	background-repeat:repeat-y;
	background-position:top center;
	padding:20px;
	padding-top:30px;
	padding-bottom:30px;
	width:760px;
}
div.information {
	width:700px;
	margin:auto;
	padding:1.5em;
	text-align:left;
	background-color:#FFF;
}

If anyone could help me, I would really appreciate it.

2

Thank-you so much I really appreciate it!

3

Use negative margin for the content box or use two div-s for the wood

<div id="plain_wood">
  <div id="fading_wood">
    <div id="contentbox">... </div>
  </div>
</div>


#plain_wood{
  background: transparent url('plain_wood.png');
}

#fading_wood{
  background: transparent url('fading_wood.png') repeat-x top left;
}