View Full Version : overlaying images in css

08-06-2007, 03:06 AM
I am making a blog and as part of my template I am wanting to have my header and then another image on the side of that using the z-index: 2; to make it that layer about. so here is the css.

.splash {
z-index: 2;
width: 135px;
height: 386px;
margin: 0 auto;
position: relative;
left: 450px;
top: 0px;
background: url('images/splash1.png');


and this is the code for the header. (its a wordpress blog btw.)

<!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">

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />

<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />

<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php wp_get_archives('type=monthly&format=link'); ?>

<?php wp_head(); ?>


<body><p class="splash">welcome</p>

<div class="main">
<div class="top">

<div class="topl">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>


<div class="topr">
<form method="get" id="searchform" action="<?php echo $_SERVER['PHP_SELF']; ?>">

<p><input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="search_query" />
<input type="submit" class="searchbutton" value="Search" /></p>


<div class="shortnfo">
<div class="menuitems">

<li class="page_item"><a href="<?php bloginfo('url'); ?>">Home</a></li>

<?php wp_list_pages('title_li='); ?>


<div class="welcome">

<p><?php bloginfo('description'); ?></p>


and the link to my site is: http://www.arctosdesign.com/blog

you should see the layout as it should be but then a nice watery image above that which is the image i am wanting to move.
if anyone could give me some advice or tips as to how to sort this i would really appriciate it.