CSS Watermark or Background & Z-index

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
donmalex
Forum Newbie
Posts: 2
Joined: Mon Aug 16, 2010 9:28 pm

CSS Watermark or Background & Z-index

Post 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;
}
Last edited by donmalex on Mon Aug 16, 2010 9:57 pm, edited 1 time in total.
donmalex
Forum Newbie
Posts: 2
Joined: Mon Aug 16, 2010 9:28 pm

Re: CSS Watermark or Background & Z-index

Post by donmalex »

http://www.linda2010.com/landing/ads/ch ... 2god1AnV3w

The above link did not work so I have posted another
wangxiaoyu
Forum Newbie
Posts: 4
Joined: Mon Sep 06, 2010 2:16 am

Re: CSS Watermark or Background & Z-index

Post 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.
Post Reply