469,286 Members | 2,521 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,286 developers. It's quick & easy.

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

I am trying to insert an image into my website. I don't want the image to move when changing the browser window size or even a monitor size, I want it to remain in the middle of a specific page. I have seen many websites do this with no problem. Every time I try it, even if I use absolute positioning, it seems to always slide around to the left or to the right. I am using Dreamweaver cs3 suite software. I am sure there are a simple fix to this problem, but I am having a mind boggling time figuring it out. Any help would be greatly appreciated. Thank You.

here is my code, what do I need to input?



Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  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 Document</title>
  6. <style type="text/css">
  7. <!--
  8. body {
  9.     background-image: url(/images/buckcollagebg.jpg);
  10. background-repeat:no-repeat;
  11. background-attachment:fixed;
  12. background-position:center; 
  13.  
  14. }
  15. -->
  16. </style>
  17. <link href="/css.css" rel="stylesheet" type="text/css" />
  18. </head>
  19.  
  20. <body>
  21.  
  22.  
  23. <p>&nbsp;</p>
  24. <p>&nbsp;</p>
  25. <p>&nbsp;</p>
  26. <p>&nbsp;</p>
  27. <p>&nbsp;</p>
  28. <p align="center">&nbsp;</p>
  29. <table width="400" border="1" align="center">
  30.   <tr>
  31.     <td><img src="/images/archer2.gif" alt="" width="346" height="432" /></td>
  32.     <td><div align="center"></div></td>
  33.     <td> <p>&nbsp;</p>
  34.     <p>&nbsp;</p></td>
  35.     <td><div align="left"><img src="/images/archer2.gif" width="346" height="432" /></div></td>
  36.   </tr>
  37. </table>
  38. <table width="300" border="1">
  39.   <tr>
  40.  
  41.   </tr>
  42. </table>
  43. </body>
  44. </html>
  45.  
Jan 5 '11 #1

✓ answered by AutumnsDecay

Table rows and columns expand to the largest elements dimensions.

For example, if you have two images; one being a 50 x 50 pixel graphic and the other being a 250 x 250, both in the same row, but separate columns, the height of the row containing both images will be 250px in height. The column it's in, if there are no other images larger than it in the same column will have a width of 250px.

For you to be able to resize your browser and everything scale, you'll have to do the entire site in percentages.

46 10002
AutumnsDecay
170 100+
Are you setting the CSS 'top' and 'left' of the image when you use absolute positioning?
Jan 5 '11 #2
AutumnsDecay
170 100+
Unless it's in your CSS, I don't see where you've set your image(s) to absolute positioning.

Try this:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  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:400px;
  11.         height:200px;
  12.         position: absolute;
  13.         top:40%;
  14.         left:40%;
  15.     }
  16. </style>
  17. </head>
  18.  
  19. <body>
  20.     <center>
  21.         <div class="centereddiv">
  22.             <img src="your_image.jpg" alt="" />
  23.         </div>
  24.     </center>
  25. </body>
  26. </html>
  27.  
Just create a blank document and try that out, you can then apply that logic / knowledge to your situation.
Jan 5 '11 #3
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?
Jan 5 '11 #4
AutumnsDecay
170 100+
No, let's say you use the above method that I posted, you could just add a second image to the code:

Expand|Select|Wrap|Line Numbers
  1. <img src="your_image.jpg" />&nbsp;&nbsp;<img src="http://bytes.com/topic/html-css/answers/..." />
  2.  
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.
Jan 5 '11 #5
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.dtd">
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="centereddiv"> 22. <img src="/images/first turkey.jpg" alt="" width="200" height="496" /> 23. </div>
<center>
21. <div class="centereddiv">
22. <img src="/images/first turkey.jpg" alt="" width="572" height="496" />
23. </div>
24. </center>
25. </body>
26. </html>
27.
Jan 5 '11 #6
AutumnsDecay
170 100+
See my above example. This will put both on top of each other.
Jan 5 '11 #7
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.
Jan 5 '11 #8
AutumnsDecay
170 100+
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. :)
Jan 5 '11 #9
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.
Jan 5 '11 #10
I have placed the images in that table, mentioned above.
Jan 5 '11 #11
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.
__________________________________________________ ______

Expand|Select|Wrap|Line Numbers
  1. <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 {
  2.     FONT-FAMILY: verdana, arial, sans-serif;
  3.     background-color: #391b07;
  4. }</STYLE>
  5. </HEAD><BODY>
  6. <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>
  7.   <TBODY>
  8.     <TR>
  9.       <TD width=358 height=451><img src="http://bytes.com/Documents/bidbooger/buckcolagelarger" alt="Buck Collage Larger" width="559" height="419" /></TD>
  10.     </TR>
  11.   </TBODY>
  12. </TABLE>
  13. <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>
  14.   <TBODY>
  15.     <TR>
  16.       <TD width=358 height=22><img src="http://bytes.com/Documents/bidbooger/originalimage5" alt="image4" width="228" height="238
  17.       " /></TD>
  18.     </TR>
  19.   </TBODY>
  20. </TABLE>
  21. <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>
  22.   <TBODY>
  23.     <TR>
  24.       <TD width=358 height=22><img src="http://bytes.com/Documents/bidbooger/image4" alt="original4" width="228" height="238" /></TD>
  25.     </TR>
  26.   </TBODY>
  27. </TABLE>
  28. <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>
  29.   <TBODY>
  30.     <TR>
  31.       <TD width=358 height=22><img src="http://bytes.com/Documents/bidbooger/1goodside.jpg" alt="originalimage1" width="228" height="238" /></TD>
  32.     </TR>
  33.   </TBODY>
  34. </TABLE>
  35. <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>
  36.   <TBODY>
  37.     <TR>
  38.       <TD width=358 height=22><img src="http://bytes.com/Documents/bidbooger/oringal5" alt="originalimage5" width="228" height="238" /></TD>
  39.     </TR>
  40.   </TBODY>
  41. </TABLE>
  42. <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>
  43.   <TBODY>
  44.     <TR>
  45.       <TD width=358 height=22><img src="http://bytes.com/images/dp.jpg" width="275" height="226"></TD>
  46.     </TR>
  47.   </TBODY>
  48. </TABLE>
  49. </BODY></HTML>
  50.  
  51. <P align=center><IMG style="Z-INDEX: 999998" src="file:///C|/Users/swg/Desktop/penciled memories files/buckcollagebg.jpg" border=0></P>
  52. </BODY></HTML>
Jan 5 '11 #12
AutumnsDecay
170 100+
If it's the same body styling as you posted above, try this:

Expand|Select|Wrap|Line Numbers
  1. body {
  2. background-image: url(/images/buckcollagebg.jpg);
  3. background-repeat:no-repeat;
  4. background-attachment:fixed;
  5. background-position:top center;
  6. }
  7.  
Jan 5 '11 #13
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!
Jan 5 '11 #14
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?
Jan 5 '11 #15
AutumnsDecay
170 100+
Dreamweaver has a 'Code' tab. You'll want to go to that tab and modify the code like so:
Expand|Select|Wrap|Line Numbers
  1. <div class="centereddiv">
  2.     <img src="images/your_image_1.jpg" alt="" />
  3.     &nbsp;&nbsp;
  4.     <img src="images/your_image_2.jpg" alt="" />
  5. </div>
  6.  
Obviously, replace 'your_image_' with your image location.
Jan 5 '11 #16
Ok, I see the problem. The background image keeps sliding upon the resizing of the window. Is there a way to stop it from sliding or a way you suggest from this occurring?
Jan 5 '11 #17
AutumnsDecay
170 100+
Try removing the 'background-attachment:fixed;' line from your code and let me know if that helps.
Jan 5 '11 #18
Hmm, The Background is still sliding. here is a direct link to what I am talking about http://www.penciledmemories.com/twodiv.html. When you click on the window and drag it to resize it the background slides to the left and right, while the pictures remain in place. I even tried resizing the background, it still slides.
Jan 5 '11 #19
Sorry forgot to mention, I did delete the background-attachment:fixed; Portion of the code.
Jan 5 '11 #20
AutumnsDecay
170 100+
Try this:

Expand|Select|Wrap|Line Numbers
  1.  
  2.  
  3. body {
  4.  background-image: url(/images/buckcollagebg.jpg);
  5.  background-repeat:no-repeat;
  6.  background-attachment:scroll;
  7.  background-position:top center;
  8.  background-color:#fff;
  9.  }
  10.  
  11.  
Jan 5 '11 #21
http://www.penciledmemories.com/twodiv.html

The background seems to still slide from its original position to the right when enlarging the browser window Sir.

The Images remain in the correct spot on the screen, but due to the background sliding it does throw it off from where it should be on the background.
Jan 5 '11 #22
Again I appreciate the help, very much.
Jan 5 '11 #23
Rabbit
12,516 Expert Mod 8TB
If you're trying to center the background image, it's going to move no matter what because the body will have to recenter whenever it gets resized.

What you will probably have to do is use a div to wrap the background image and set a width for that div.
Jan 5 '11 #24
It doesn't bother me that the background is moving. What I desperately need is the images to remain in the center of that background, even if the background moves I need the images to move along with it. So the images are placed correctly within the background at all times. This is something that can be done right? Thanks guys.
Jan 5 '11 #25
http://www.penciledmemories.com/twodiv.html

Current Page for what I am working with.
Jan 5 '11 #26
I know I have seem CSS templates do it with images, and pages. I just need to have two images centered within the background and even if the resizing occurs the images move along with the background, so everything remains in its correct position.
Jan 5 '11 #27
Rabbit
12,516 Expert Mod 8TB
Try this:
Expand|Select|Wrap|Line Numbers
  1.             .centereddiv
  2.                 {
  3.                     float:left;
  4.                     width:50%;
  5.                 }
  6.  
  7.             .centereddiv2
  8.                 {
  9.                     float:left;
  10.                     width:50%;
  11.                 }
  12.  
Jan 5 '11 #28
Ok, sorry to keep updating my status but I just want to let you guys know where I am. I have figured out how to not make the background move when resizing the browser, only problem now is when I do this, the background and the images are to the uppder left and not centered. I know this is because I have this in the code


Expand|Select|Wrap|Line Numbers
  1. body {
  2.     background-image: url(http://www.penciledmemories.com/buckcollagebg1.jpg);
  3.     background-repeat: no-repeat;
  4.     background-color: #ffffff;
  5.     background-attachment:fixed;
  6.  
  7. }
  8.  
I am aware that I don't have anything telling the background to center, but I am afraid that if I do it will slide again. Any suggestions on how to have it center without it sliding?
Jan 5 '11 #29
http://www.penciledmemories.com/twodivzz.html


I inserted the float:left;
width:50%;


dang background wants to move and the images remain in place. If you think there is any way of doing what I am trying to accomplish other than the way I am doing it, please do tell me. I again appreciate all the help and hard work guys.. thank you
Jan 5 '11 #30
should i re-size the background image? so it pushes the browser to not move it?
Jan 5 '11 #31
Rabbit
12,516 Expert Mod 8TB
I didn't mean for you to append it to what you had. I meant for you to replace the styles you had for the centered divs with the styles I provided.
Jan 5 '11 #32
Oh ok, sorry. I will now try this.
Jan 5 '11 #33
http://www.penciledmemories.com/twodivzz.html

Upon doing this, with just the float command, once the browser window is re sized smaller it seems everything stacks on top of one another. Should I just set the background and the image to one full image? and just insert that within the page as a background image?
Jan 5 '11 #34
Rabbit
12,516 Expert Mod 8TB
You could always use a table.
Jan 5 '11 #35
A table for the background image? or a table for the images alone.
Jan 5 '11 #36
Rabbit
12,516 Expert Mod 8TB
A table for the images alone. If you must have everything resize and reposition together. A table won't overlap cells or break a row onto the next line.

Although if it doesn't matter that everything has to resize and reposition and that everything can be static, you can just do that.
Jan 5 '11 #37
Ok I will use tables, that seems to be a easy way to do it. My only question is, if I have a main image inside of the template in its center column. How can i insert a row in the table to put an image up next to the large center image without distorting the image in the center. Basically how do you create a table and have different row sizes within the table, or a table beside each other.
Jan 5 '11 #38
Is there a way to create a table with different column sizes?
Jan 6 '11 #39
For example so you guys better understand the question. Is there a way to have different rows in a table and have different heights to those rows, so that i can place a very larger image inside of the middle column and have a smaller image on the other columns?
Jan 6 '11 #40
AutumnsDecay
170 100+
Table rows and columns expand to the largest elements dimensions.

For example, if you have two images; one being a 50 x 50 pixel graphic and the other being a 250 x 250, both in the same row, but separate columns, the height of the row containing both images will be 250px in height. The column it's in, if there are no other images larger than it in the same column will have a width of 250px.

For you to be able to resize your browser and everything scale, you'll have to do the entire site in percentages.
Jan 6 '11 #41
Rabbit
12,516 Expert Mod 8TB
I thought both images were the same size?
Jan 6 '11 #42
I understand. and they are. I just wanted a main image and a secondary image in the corner of that image, I was hoping you could re size a tables row or column to do so.
Jan 6 '11 #43
AutumnsDecay
170 100+
You can set a width and height, but if you don't, it will auto-size itself, thus eliminating the need to set a width and height.
Jan 6 '11 #44
Rabbit
12,516 Expert Mod 8TB
If you're trying to overlap one image with another, you can just put both images in the same table cell.
Jan 6 '11 #45
Thank you guys, I really appreciate your help so much. As a young developer I am still constantly learning and pushing myself to new and better things. I unfortunately have no one that can help me personally due to the fact no one wants to strive to do the hard things I am trying to accomplish. I appreciate everything.
Jan 6 '11 #46
Rabbit
12,516 Expert Mod 8TB
No problem, good luck.
Jan 6 '11 #47

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

5 posts views Thread by Aaron | last post: by
7 posts views Thread by Andrew Poulos | last post: by
3 posts views Thread by Peter Oliphant | last post: by
53 posts views Thread by Jonas Smithson | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.