Html-Css, Layering Backgrounds Question

[npl]

Hey,

 

I want to have 3 background images layered on each other. It should look like the image below.

 

 

So I want the outline of the mountains on the top of the background.

A white layer beneath it that sticks out about half an inch on each side.

A grid which would be set to repeat behind that.

 

It should be like layers in photoshop.

 

Just note I don't want to do all this in one image. Loading a giant image as a background will kill my bandwidth and speed. If the grid, the largest part of the background is set to "repeat" it will take less time and bandwidth to load.

 

Can you guys help me out with the code. I know some html and css to do this. However it is only very basic knowledge learn't from http://www.w3schools.com/

 

Thanks for the help!

Nolan,

 

[Guest xaav]

You should be able to use the z-index property to do this. For example, you would have three divs with top:0, left:0, height:100%, and width:100%. However, their z-index properties would be different, so you could layer them.

[vol7ron]

Just set the background of a <div> and nest the div with other divs that have backgrounds w/ transparencyIf you're going to use xaav's approach you'll need to use absolute positioning (position:absolute).

[npl]

Ahh I wish I understood what that means. I have verrrrry basic knowledge of CSS and HTML. lol I just began learning less then a year ago.

 

Is there any chance you could just show me the code and what to insert where? That would be awesome and save me a lot of grief.

 

Thanks!

[Krydos]

The screenshot you posted looks a lot like a CMS. Why not go to you cPanel and find softaculous and install a CMS that sounds good to you and then install a theme that looks pretty close to what you want and customize.

[npl]

It is wordpress. And the theme I got is very similar to the image. Its called Canvas by Woothemes http://www.woothemes.com/2011/05/canvas/.The only thing I changed was the backgrounds and a few of the graphics.

 

All I need to do know is take the changes that I made in PS and translate them to code. Any chance you could help me by posting what I should do if you do not mind?

[Guest xaav]

Actually, @vol7ron's approach was better than mine. The code for his approach would look like this:

 

<style type="text/css">
.background-div {
  padding: 0;
  margin: 0;
}
</style>
<div class="background-div" style="background-image:url('image.gif')">
<div class="background-div" style="background-image:url('image2.gif')">
<div class="background-div" style="background-image:url('image3.gif')">

Content in here has all three backgrounds!
</div>
</div>
</div>

 

Of course, the images will need to be transparent for this to work, or you can make them transparent with CSS, as @vol7ron said.

[npl]

sweet guys! =) your advice helped out a lot.