asked on

layering a second image over a background image

If you would refer to the attached image, I'm trying to get the logo positioned in the upper left hand corner and I want to try and use some css elements to pull it off.

I've attached my code and stylesheet thus far. How could I get the logo in the upper left hand corner to sit on top of the gray and red stripes?

Stylesheet:

html {
      background: url(images/background.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

body {
margin: 0px 0px 0px 0px;

}

td {
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 12px;
      color: #000000;
      vertical-align:top;
      text-align:left;
}

td.repeating_background {
background:url(images/repeating_background.jpg);
height:153px;
}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<?php
include("carter.inc");
$cxn = mysqli_connect($host,$user,$password,$database)
or die ("couldn't connect to server");
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Loose Cannon Fitness | Big, Loud and Outrageous | Bruce Gust</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(
      function(){
      $('ul#portfolio').innerfade({
            speed: 1000,
            timeout: 5000,
            type: 'sequence',
            containerheight: '353px'
      });
});
</script>
<map name="right_corner">
<area shape="rect" coords="9,8,206,32" href="show.php">
<area shape="rect" coords="226,10,271,31" href="login.php">
<area shape="rect" coords="294,7,431,36" href="http://www.brucegust.com" target="_blank">
</map>
</head>

<body>
<table width=100% cellspacing="0" cellpadding="0">
<tr>
<td class="repeating_background">
home | about | videos | tracks | docs | contact
</td>
</tr>
<tr>
<td> 
<A HREF="index.php"><IMG SRC="images/logo.png" width="250" border="0">
</td>
</tr>
</table>
css-challenge.png

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Robert Granlund

Possibly because you have already closed the <td> with class="repeating_background".

Try giving the table the class class="repeating_background" instead of the <td>

Bruce Gust

ASKER

Off the hook!