0

He is what im trying to do, ive got a logo that i want to place around the center of your screen over my semi-complex background that is set up like this...

[IMG]http://i11.photobucket.com/albums/a160/woody33/help.jpg[/IMG]
The "logo" image will be placed over the tiled image, but when the browser is shrinked because of a user using a smaller resolution, for example 1024x768, but the image would remain on the right side of the tiling area when it expands for a higher rez.

Just a push in the right direction to what css and/or html i should use to get the job done would help. I can post some of my own code too, if needed.

3
Contributors
11
Replies
12
Views
11 Years
Discussion Span
Last Post by Woobag
0
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.imagetest {
    background-image: url(swoosh_tile.png);
    background-repeat: repeat-x;
}
enn {
    left: 293px;
    top: 522px;
    z-index: 100;
    background-attachment: fixed;
    background-image: url(ennovative.png);
    background-repeat: no-repeat;
    background-position: 293px 522px;
    position: absolute;
}
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
bg {
    z-index: 50;
}
-->
</style>
</head>

<body>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<table class="enn" width="335" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td></td>
  </tr>
</table>

<table id="bg" width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td background="swoosh_left.png" width="540" height="104">&nbsp;</td>
    <td class="imagetest" height="104">&nbsp;</td>
    <td background="swoosh_right.png"width="457"height="104">&nbsp;</td>
  </tr>
</table>

</body>
</html>

Might seem kinda "hodge-podge" or redundant in parts because i was kinda using trial and error to get this working.

0

first. separate the css of the document.

Not sure what you mean...You can have your CSS and HTML all in one file. Do you mean seperate it so you can read it better?

0

Since you are using tables and not divs for this, here is an easy solution...

<table id="bg" width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td background="swoosh_left.png" width="540" height="104"><img src="resources/images/spacer.gif" width="540"></td>
    <td class="imagetest" height="104" width="100%">&nbsp;</td>
    <td background="swoosh_right.png"width="457"height="104"><img src="resources/images/spacer.gif" width="457" /></td>
  </tr>
</table>

Use a transparent gif to keep your outer cells at a fixed width and set your inner cell to 100% width.

0

If that is a background image set by css, add the following:

background-repeat: repeat-x;

This will make the image repeat horizontally, but not vertically.

0

Strange, it still has problems witht the table being copied downward, but the it only tiles the "swoosh_tile" accross in the first one.

0

Do you think it has anything to do with the table not really having any height definition?

edit: here is my updated code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.imagetest {
    background-image: url(swoosh_tile.png);
    background-repeat: repeat-x;
}
-->
</style>
</head>

<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td background="swoosh_left.png" width="540" ><img src="spacer.gif" width="540"></td>
    <td class="imagetest" height="104px" width="100%"></td>
    <td background="swoosh_right.png"width="457"><img src="spacer.gif" width="457" /></td>  
   </tr> 
</table>
</body>
</html>
0

No...it has to do with your image widths being set to 540 and 457. Lower those to something reasoable like 100 or 150 and you'll get the result you are looking for.

0

Ok, ive fixed the problem. It was the spacer images did not have a height value and were for some reason stretching the table far downwards. I set the height values of the spacer image to match that of the background images and it was fixed so that it works for both resolutions. Now my only problem is getting my logo image on top of that middle "stretched" area where it fits for both resolutions.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.