CSS Picture Position

ast3r3x

How do i position a picture with CSS...from w3schools.com they show how to do this with a background but not with a regular image



can somone tell me or point me in the direction of where i can read about this?



the reason i ask is because i want teh background to be different from the picture that is centered in the middle of a page (its a page to view larger versions of pictures so i have the background but wnat the picture in the center)

ringo

If you want to just judge it a bit from its current position, use this:

<img src="foo.png" style="position:relative;top:10px;left:14px;">



If you want to give it an exact position, use this method:

<img src="foo.png" style="position:absolute;top:100px;left:75px;">

ast3r3x

well that is very useful, and i can use that...but is there a way to make it relative center (from top and side) so taht if they resize it stays in the center?

ringo

That's a bit trickier to do... You can set the top and left values to 50%, but that might give strange results. But, eh... try it out!

ast3r3x

it doesn't do anything weird it centers the top left hand corner

ringo

I remember some trick to get around that... somehow putting the image inside a centered 1x1 container and allowing the image to expand beyond the edges of the container... I'm not completely sure how to do that.

ast3r3x

Quote:

Originally posted by Ringo

I remember some trick to get around that... somehow putting the image inside a centered 1x1 container and allowing the image to expand beyond the edges of the container... I'm not completely sure how to do that.

i'm not sure either but it sounds like it would work haha (if only i knew how)