Page 1 of 1

CSS Watermark or Background & Z-index

Posted: Mon Aug 16, 2010 9:51 pm
by donmalex
I am very new to web design only 4 days exp. I am 75 years old. in years past I programed in Cobal, Fortran, Clipper. but nothing in many years.
I would like to do a site with first page like this.http://www.linda2010.com/landing/ads/ch ... 2god1AnV3w
I like the colors and the Capitol building in background kind of like a watermark. Also the contrasting lights and darks with the rays. I have searched the web and studied the code for above site but some code is not available.

My code is all on my computer no web site as of now. My code is as follows.

Can you give me a better way to make a page like this or help me with what I have so far.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">

<title>CSS Layers, Z-Index, Relative And Absolute Positioning - Onextrapixel</title>

<style type="text/css">
body
{background-image: url('bgimg.gif');background-repeat: no-repeat;}
</style>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

</head>

<body>

</div>

<div id="layer1">
<h2> </h2>
<p> <img src="cap1.jpg" alt= "US Capitol" width="991" height="609" /> </p>




<div id="layer2">
<h2> </h2>
<p> <img src="Man-Woman.jpg" alt="Man and Woman" width="" height="" /> </p>
</div>

<div id="layer3">
<h2>Tital layer 3</h2>
<p> Text for 3 goes here </p>
</div>

<div id="layer4">

<h2>Tital layer 4/h2>
<p>Text for 4 goes here </p>
</div>
</div>
</div>
</body>
</html>




<!-- style.css -->
{
border:none;
margin:0;
padding:0;
}

body {
background:#fff;
color: #000;
font:12.35px "Lucida Grande", Arial, Georgia, Verdana, sans-serif;
}

a:link {
color:#0054a6;
text-decoration:none;
}

h1 {
font-size:20px;
margin-bottom:20px;
}
h2 {
font-size:15px;
margin-bottom:5px;
padding:10px 10px 0 10px;
}

#wrap {
margin:10px auto;
width:900px;
}

#header {
margin-bottom:20px;
}

#header a {
color:#0054A6;
}

#header a:hover {
text-decoration:underline;
}

#desc {margin:10px 0;}

p {
padding:10px;
}


/*Z-Index, Relative And Absolute Positioning*/
#layer1
{background:#0FF;
position:relative;
width:0px;
height:0px;
color:#fff;
}
#layer2
{background: #f9ad81;
position:absolute;
top:200px;
left:650px;
width:200px;
height:0px;
color:#fff;
z-index:1;
}
#layer3
{background:#6dcff6;
position:absolute;
top:450px;
left:100px;
width:800px;
height:200px;
color:#fff;
z-index:2;
}
#layer4
{background:#82ca9c;
position:absolute;
background-color:transparent;
top:120px;
left:150px;
width:400px;
height:300px;
color:#fff;
z-index:3;
}

Re: CSS Watermark or Background & Z-index

Posted: Mon Aug 16, 2010 9:56 pm
by donmalex
http://www.linda2010.com/landing/ads/ch ... 2god1AnV3w

The above link did not work so I have posted another

Re: CSS Watermark or Background & Z-index

Posted: Mon Sep 06, 2010 2:43 am
by wangxiaoyu
hi, this is the web page's background image link http://www.linda2010.com/landing/resour ... ground.jpg, which defined in the css of http://www.linda2010.com/landing/resour ... ington.css
you can also use photoshop to create one like it.