1. Home
  2. Forums Index
  3. Browser Side / HTML 1:51 pm May 1, 2026

Forum Moderators: open

Message Too Old, No Replies

Background image and foreground text are not aligned after a resize

         

theloomis

7:44 am on Jan 19, 2008 (gmt 0)

10+ Year Member



I need help sorting out the problem with a website I designed which uses DIV tags to allow me to use a background image with layers of editable text over it. What I have works fine in all browsers EXCEPT when the screen resolution changes and/or the browser is resized. Then the text no longer properly or predictably lines up with the background image. I really appreciate you taking the time to help.
This is what I have:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>News</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW ¦¦ innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body bgcolor="#552B00" link="#FFFFCC" vlink="#FFFFFF" alink="#FFFF99">

<div id="Layer1" style="position:absolute; left:250px; top:140px; width:559px; height:324px; z-index:1; overflow: auto;">

<p><font color="#FFFFFF"><strong><font size="+2">NEWS<br>
</font></strong></font><font color="#FFFFFF"><strong><br>

<br>!TEXT CONTENT!<br></p>
</div>

<blockquote>
<div align="center">
<pre><img src="http://example.com/news_template.jpg" width="800" height="550" border="0" usemap="#Menu">

<map name="Menu"><area shape="rect" coords="124,488,205,531" href="http://example.com/home.htm"><area shape="rect" coords="210,489,286,531" href="http://www.example.com/news.htm"><area shape="rect" coords="292,489,342,531" href="http://www.example.com/bio.htm"><area shape="rect" coords="348,489,416,531" href="http://www.example.com/tools.htm"><area shape="rect" coords="423,489,507,530" href="http://www.example.com/music.htm"><area shape="rect" coords="515,489,609,529" href="http://www.example.com/visuals.htm"><area shape="rect" coords="615,490,714,529" href="http://www.example.com/contact.htm"></map></pre>
</div>

</blockquote>
</body>
</html>

Thoughts? Solutions?

birdbrain

1:32 pm on Jan 19, 2008 (gmt 0)



Hi there theloomis,

and a warm welcome to these forums. ;)

Try it like this... 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>News</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
 background-color:#552b00;
 }
#map_holder {
 position:relative;
 width:800px;
 margin:auto;
 }
#layer1 {
 position:absolute; 
 left:120px; /*this value may require resetting*/
 top:140px; /*this value may require resetting*/
 z-index:1; 
 width:559px; 
 height:324px; 
 overflow:auto;
 }
#layer1 h1 {
 font-size:24px;
 color:#fff;
 }
#layer1 p {
 color:#fff;
 }
#map_holder img {
 position:absolute;
 left:0;
 top:0;
 z-index:0;
 width:800px;
 height:550px;
 border:0 solid;
 }
a:link {
 color:#ffc;
 }
a:visited {
 color:#fff;
 }
a:hover {
 color:#f00;
 }
a:active {
 color:#ff9;
 }
</style>
</head>
<body>
<div id="map_holder">
<div id="layer1">
<h1>NEWS</h1>
<p>!TEXT CONTENT!</p>
</div>
<img src="http://example.com/news_template.jpg" usemap="#menu" alt="">
<map name="menu" id="menu">
<area shape="rect" coords="124,488,205,531" href="http://example.com/home.htm" alt="">
<area shape="rect" coords="210,489,286,531" href="http://www.example.com/news.htm" alt="">
<area shape="rect" coords="292,489,342,531" href="http://www.example.com/bio.htm" alt="">
<area shape="rect" coords="348,489,416,531" href="http://www.example.com/tools.htm" alt="">
<area shape="rect" coords="423,489,507,530" href="http://www.example.com/music.htm" alt="">
<area shape="rect" coords="515,489,609,529" href="http://www.example.com/visuals.htm" alt="">
<area shape="rect" coords="615,490,714,529" href="http://www.example.com/contact.htm" alt="">
</map>
</div>
</body>
</html>

birdbrain

theloomis

5:37 pm on Jan 20, 2008 (gmt 0)

10+ Year Member



Birdbrain,
Thank you so much. That really helped a lot! I am having one other small problem when it comes to implementing your justed code. It has to do with nesting images. I need to have two layers; Layer1 with the text and another (Layer2) to the right which has corresponding images all within the same parent scrolling layer. I have tried a bunch of variations of placing the "div id" and the img tags of Layer2 within the parent Layer1 but they either distort the images (very large and pixelated) or the images look fine but don't scroll with the parent text Layer1.
Here is what I have (which makes the images look fine but doesn't scroll with the text):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Tools</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color:#552b00;
}
#map_holder {
position:relative;
width:800px;
margin:0 auto;
}
#layer1 {
position:absolute;
margin:0 auto;
left:145px; /*this value may require resetting*/
top:120px; /*this value may require resetting*/
z-index:1;
width:559px;
height:324px;
overflow:auto;
}
#layer1 h1 {
font-size:24px;
color:#fff;
}
#layer1 p {
color:#fff;
}

#layer2 {
position:absolute;
left:490px; /*this value may require resetting*/
top:160px; /*this value may require resetting*/
z-index:2;
width:195px;
height:600px;
overflow:auto;
}
#layer2 h1 {
font-size:24px;
color:#fff;
}
#layer2 p {
color:#fff;
}

#map_holder img {
position:absolute;
left:0;
top:0;
z-index:0;
width:800px;
height:550px;
border:0 solid;
}
a:link {
color:#ffc;
}
a:visited {
color:#ff9;
}
a:hover {
color:#fff;
}
a:active {
color:#ff9;
}
</style>

</head>
<body>

<div id="layer2">
<img src="http://example.com/images/drumset1_web_small.jpg" width="180" height="154"><br>
<br>
<img src="http://example.com/images/drumset3_web_small.jpg" width="192" height="110"><br>
<br>
<img src="http://example.com/images/drumset2_web_small.jpg" width="166" height="136"><br>
</div>

<div id="map_holder">

<div id="layer1">
<h1>Tools: Equipment Checklist</h1>
<font color="#FFFFFF">
<p><strong><font color="#FFFFFF">THE KIT:<br>
///TEXT CONTENT///
</div>

<img src="http://realdoyle.com/news_template.jpg" usemap="#menu" alt="">
<map name="menu" id="menu">
<area shape="rect" coords="124,488,205,531" href="http://example.com/home.htm" alt="">
<area shape="rect" coords="210,489,286,531" href="http://www.example.com/news.htm" alt="">
<area shape="rect" coords="292,489,342,531" href="http://www.example.com/bio.htm" alt="">
<area shape="rect" coords="348,489,416,531" href="http://www.example.com/tools.htm" alt="">
<area shape="rect" coords="423,489,507,530" href="http://www.example.com/music.htm" alt="">
<area shape="rect" coords="515,489,609,529" href="http://www.example.com/visuals.htm" alt="">
<area shape="rect" coords="615,490,714,529" href="http://www.example.com/contact.htm" alt="">
</map>
</div>
</body>
</html>

-------------------------------

When I try and place the Layer 2 where I think it should go (within Layer1) then the images get very pixelated and large:

[...code edited down for simplicity, I used the same DocType, etc. as above example]

<div id="map_holder">

<div id="layer1">

<div id="layer2">
<img src="http://example.com/images/drumset1_web_small.jpg" width="180" height="154"><br>
<br>
<img src="http://example.com/images/drumset3_web_small.jpg" width="192" height="110"><br>
<br>
<img src="http://example.com/images/drumset2_web_small.jpg" width="166" height="136"><br>
</div>

<h1>Tools: Equipment Checklist</h1>
<font color="#FFFFFF"><p><strong><font color="#FFFFFF">KIT:<br>
///TEXT CONTENT///
</div>

<img src="http://example.com/news_template.jpg" usemap="#menu" alt="">
<map name="menu" id="menu">
<area shape="rect" coords="124,488,205,531" href="http://example.com/home.htm" alt="">
<area shape="rect" coords="210,489,286,531" href="http://www.example.com/news.htm" alt="">
<area shape="rect" coords="292,489,342,531" href="http://www.example.com/bio.htm" alt="">
<area shape="rect" coords="348,489,416,531" href="http://www.example.com/tools.htm" alt="">
<area shape="rect" coords="423,489,507,530" href="http://www.example.com/music.htm" alt="">
<area shape="rect" coords="515,489,609,529" href="http://www.example.com/visuals.htm" alt="">
<area shape="rect" coords="615,490,714,529" href="http://www.example.com/contact.htm" alt="">
</map>
</div>
</body>
</html>

---------------------

Thanks again for all of your help. I really appreciate it.

theloomis

4:02 pm on Jan 22, 2008 (gmt 0)

10+ Year Member



Can anyone help with the issue I am having with images not showing correctly in my DIV layers? I can get text to operate correctly but images seem to get really large and pixelated. I have posted the code I am using above. I would really like to be able to have the text on one DIV layer and the images on a second DIV layer.
Thank you so much for your help.

tedster

6:23 pm on Jan 22, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Sorry, that's a mystery to me. If you are using the original height and width of an image, I can't imagine why it would pixelate beyond the appearance of the original file.

Have you validated your mark-up?

W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / HTML 1:51 pm May 1, 2026