...

View Full Version : Multiple Backgrounds Help



nolan
11-11-2011, 02:32 AM
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,

http://i.imgur.com/YMIDR.png

Excavator
11-11-2011, 03:25 AM
Hello nolan,
Nesting (http://www.reynoldsftw.com/2009/03/css-positioning-techniques-for-nested-divs/) a few div elements will do this for you. Not hard at all.
What might be harder is the images themselves. Some ps work creating transparent .png's is probably what's needed, that or find your images online.

Your white border sticking out a 1/2 inch or so, couldn't that be done with a CSS border (http://www.w3schools.com/css/css_border.asp)? Would save you some work.

nolan
11-11-2011, 03:39 AM
Thanks! I understand the nesting thing you mentioned, the link helped.
However I still am having trouble. How do I layer the images like layers in photoshop. They need to be stacked in order for this to work. Any idea on how to do that?

Excavator
11-11-2011, 03:49 AM
Thanks! I understand the nesting thing you mentioned, the link helped.
However I still am having trouble. How do I layer the images like layers in photoshop. They need to be stacked in order for this to work. Any idea on how to do that?

Something like this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
background: #cf0;
}
#outer-wrap {
margin: 25px;
background: #fc6 url(http://www.bottomsupaz.com/wp-content/themes/zeus/images/grid-patterns/preview/grid3.png);
border: 25px solid #fff;
}
#container {
height: 600px; /*demo only*/
width: 800px;
margin: 30px auto;
background: #999;
}
</style>
</head>
<body>
<div id="outer-wrap">
<div id="container">
<!--end container--></div>
<!--end outer-wrap--></div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum