Inserting an image so it won't move on different size monitors?

**AutumnsDecay** · Jan 5 '11, 01:00 PM

Are you setting the CSS 'top' and 'left' of the image when you use absolute positioning?

**AutumnsDecay** · Jan 5 '11, 03:54 PM

Unless it's in your CSS, I don't see where you've set your image(s) to absolute positioning.

Try this:

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=utf-8" />
<title>Untitled</title>

<style type="text/css">
.centereddiv
    {
        width:400px;
        height:200px;
        position: absolute;
        top:40%;
        left:40%;
    }
</style>
</head>

<body>
    <center>
        <div class="centereddiv">
            <img src="your_image.jpg" alt="" />
        </div>
    </center>
</body>
</html>

Just create a blank document and try that out, you can then apply that logic / knowledge to your situation.

**Sean Watkins** · Jan 5 '11, 05:37 PM

so what If I wanted two images to be centered within the page? Would I also have to use the left and right intervals as well?

**AutumnsDecay** · Jan 5 '11, 05:41 PM

No, let's say you use the above method that I posted, you could just add a second image to the code:

Code:

<img src="your_image.jpg" />&nbsp;&nbsp;<img src="http://bytes.com/topic/html-css/answers/..." />

You'd want to modify the CSS of the div containing these images. Set the width property to auto, or whatever the total dimensions of the images are, if you know them.

**Sean Watkins** · Jan 5 '11, 05:42 PM

code of two images, I would like them to be side by side with a little space in between them.

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>Untitled </title>
6.
7. <style type="text/css">
8. .centereddiv
9. {
10. width:100px;
11. height:200px;
12. position: absolute;
13. top:90%;
14. left:75%;
15. }
16. </style>
17. </head>
18.
19. <body>
20.
<div class="centered div"> 22. <img src="/images/first turkey.jpg" alt="" width="200" height="496" /> 23. </div>
<center>
21. <div class="centered div">
22. <img src="/images/first turkey.jpg" alt="" width="572" height="496" />
23. </div>
24. </center>
25. </body>
26. </html>
27.

**AutumnsDecay** · Jan 5 '11, 05:43 PM

See my above example. This will put both on top of each other.

**Sean Watkins** · Jan 5 '11, 05:54 PM

So I will need to actually paste the div tag code into a CSS document, and not directly into the HTML code its self? Also wanted to say thank you thus far for all the help, I really appreciate it sir.

**AutumnsDecay** · Jan 5 '11, 05:58 PM

With absolute positioning, it doesn't matter WHERE in the document it is, as long as it's within the <body> tag.

If you copy the CSS I made for that example for you, and copy the div I made as well, and populate that div with your images, it should work.

It's hard to know if it will 100% work for what you're doing, as I don't know exactly what your project is.

You're welcome though. Sites like this, with people like me are the gateway for the next generation of developers. :)

**Sean Watkins** · Jan 5 '11, 07:16 PM

Ok, one other thing. I have a background image set in my document. When I go to my MAC and re-size the window the background moves differently than that of the table I have inserted in the document. What is causing this? Is it because I don't have the table in a absolute position DIV? It's just that the image slides around and changes the location of where I intended the image to be. I know its not a big big deal, but when you have a background image and images on top of that, when one moves and the other moves differently then this throws everything off center, and looks non professional.

**Sean Watkins** · Jan 5 '11, 07:17 PM

I have placed the images in that table, mentioned above.

**Sean Watkins** · Jan 5 '11, 07:23 PM

Here is the code I am working with, I need these images inserted here to stay the same position, just not move once the browser of any different size monitor is re-sized. That is all I am trying to accomplish within this page. Thanks again, so much appreciated.
_______________ _______________ _______________ ___________

Code:

<HTML><HEAD><TITLE>Enter Page Title Here</TITLE><META http-equiv=Content-Type content="text/html; charset=utf-8"><META content="MSHTML 6.00.6001.18542" name=GENERATOR><STYLE type=text/css>BODY {
	FONT-FAMILY: verdana, arial, sans-serif;
	background-color: #391b07;
}</STYLE>
</HEAD><BODY>
<TABLE style="Z-INDEX: 102; POSITION: absolute; left: 373px; top: 230px; height: 422px; width: 539px;" height=453 cellSpacing=1 cellPadding=1 width=366 border=0>
  <TBODY>
    <TR>
      <TD width=358 height=451><img src="http://bytes.com/Documents/bidbooger/buckcolagelarger" alt="Buck Collage Larger" width="559" height="419" /></TD>
    </TR>
  </TBODY>
</TABLE>
<TABLE style="Z-INDEX: 102; POSITION: absolute; left: 952px; top: 493px; height: 174px; width: 190px;" height=26 cellSpacing=1 cellPadding=1 width=366 border=0>
  <TBODY>
    <TR>
      <TD width=358 height=22><img src="http://bytes.com/Documents/bidbooger/originalimage5" alt="image4" width="228" height="238
      " /></TD>
    </TR>
  </TBODY>
</TABLE>
<TABLE style="Z-INDEX: 102; POSITION: absolute; left: 953px; top: 220px; height: 174px; width: 190px;" height=26 cellSpacing=1 cellPadding=1 width=366 border=0>
  <TBODY>
    <TR>
      <TD width=358 height=22><img src="http://bytes.com/Documents/bidbooger/image4" alt="original4" width="228" height="238" /></TD>
    </TR>
  </TBODY>
</TABLE>
<TABLE style="Z-INDEX: 102; POSITION: absolute; left: 123px; top: 220px; height: 174px; width: 229px;" height=26 cellSpacing=1 cellPadding=1 width=366 border=0>
  <TBODY>
    <TR>
      <TD width=358 height=22><img src="http://bytes.com/Documents/bidbooger/1goodside.jpg" alt="originalimage1" width="228" height="238" /></TD>
    </TR>
  </TBODY>
</TABLE>
<TABLE style="Z-INDEX: 102; POSITION: absolute; left: 123px; top: 493px; height: 174px; width: 190px;" height=26 cellSpacing=1 cellPadding=1 width=366 border=0>
  <TBODY>
    <TR>
      <TD width=358 height=22><img src="http://bytes.com/Documents/bidbooger/oringal5" alt="originalimage5" width="228" height="238" /></TD>
    </TR>
  </TBODY>
</TABLE>
<TABLE style="Z-INDEX: 102; POSITION: absolute; left: 526px; top: 683px; height: 174px; width: 265px;" height=26 cellSpacing=1 cellPadding=1 width=366 border=0>
  <TBODY>
    <TR>
      <TD width=358 height=22><img src="http://bytes.com/images/dp.jpg" width="275" height="226"></TD>
    </TR>
  </TBODY>
</TABLE>
</BODY></HTML>

<P align=center><IMG style="Z-INDEX: 999998" src="file:///C|/Users/swg/Desktop/penciled memories files/buckcollagebg.jpg" border=0></P>
</BODY></HTML>

**AutumnsDecay** · Jan 5 '11, 08:15 PM

If it's the same body styling as you posted above, try this:

Code:

body {
background-image: url(/images/buckcollagebg.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top center;
}

**Sean Watkins** · Jan 5 '11, 08:20 PM

AutumnsDecay,

Thank you so much sir, that worked perfectly. I can't say how appreciated I am, that you took your time to help me out and it did actually work. Thank you so much Sir. Thank you!

**Sean Watkins** · Jan 5 '11, 08:28 PM

Sorry I do have one other question, that you might have answered before, just want to make sure I am doing this right. When I go to copy the DIV tag... for further images or items, would I just copy the DIV tag all together, or would I have to change the codes. Because I have tried to click on the div and copy and paste but it doesn't give me a second div square in Dreamweaver... what am I doing wrong on this part?

Inserting an image so it won't move on different size monitors?

Inserting an image so it won't move on different size monitors?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment