• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 381
  • Last Modified:

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>&nbsp;
<A HREF="index.php"><IMG SRC="images/logo.png" width="250" border="0">
</td>
</tr>
</table>
css-challenge.png
0
brucegust
Asked:
brucegust
1 Solution
 
Julian HansenCommented:
Like this. Add an id="logo" to your <a> element
...
<a href="index.php" id="logo"><IMG SRC="images/logo.png" width="250" border="0">
..

Open in new window

Style
#logo {
  position: absolute; 
  top: 0;  /* Change this to move to where you want it */
  left: 10%; /* Change this to move to where you want it */

Open in new window

0
 
rgranlundCommented:
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>
0
 
brucegustPHP DeveloperAuthor Commented:
Off the hook!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now