Using CSS to center and overlay images
Moderator: General Moderators
Using CSS to center and overlay images
I'm having trouble finding a cross-browser solution to do what I want. Basically, I want to center an image in the browser window, and then place other images on top of that main image. It seems like CSS with the right <div> tags should do this, but I haven't been able to hit upon the right combination.
You can see a left-justified version of this at this page:
http://www.robreid.com/twins/index.php
This is exactly what I want, except I want the image to be centered. The smaller images (the numbers and text) need to remain in their current positions relative to the main picture.
And yes, the left-justified version is completely servicable, but I'd like to know how to do this to advance my CSS knowledge.
You can see a left-justified version of this at this page:
http://www.robreid.com/twins/index.php
This is exactly what I want, except I want the image to be centered. The smaller images (the numbers and text) need to remain in their current positions relative to the main picture.
And yes, the left-justified version is completely servicable, but I'd like to know how to do this to advance my CSS knowledge.
valign=vertical-align
try
try
Code: Select all
.bgpict {
text-align: center;
width: 600px;
height: 368px;
padding: 0px;
border: 1 solid #000000;
}I think the strange characters were because of the way my system handles cutting-and-pasting in some cases. The strange characters should not be there any more. The weird thing is, it's still left-justified! I am testing it in Safari and IE 5.2 (both Mac OS X). Maybe, volka, you can tell me if it looks any different and/or if the strange characters are still there.
Thanks, Oromian, for trying various permuations. I don't mind it being impossible (or nearly so), just as long as I'm not overlooking something I should know about CSS.
Thanks, Oromian, for trying various permuations. I don't mind it being impossible (or nearly so), just as long as I'm not overlooking something I should know about CSS.
it's still left aligned
replacebyit's working then for me, if I save your page and add a proper <base href=....>
replace
Code: Select all
#bgpict {Code: Select all
.bgpict {sorry, my fault. I played a bit with the code and posted the wrong version
Code: Select all
#bgpict {
text-align: center;
padding: 0px;
}
#bgpict img{
border: 1px solid #000000;
}I've just had to do pretty much the same thing as you Rob - although in my case I am using a free-floating image, not the background-image.
The image is exactly in the center of the screen. Do note, however, that the distance from the "top" is 33%, it depends on the image size. I had to make use of "top" since vertical-align has apparently not been implemented outside W3.org.
EDIT: Bah, I am not awake today. Mozilla and NS don't like this kind of positioning... I'll try some more...
EDIT 2: Well, looks like IE is using the right border of a DOM-element when the position is set to absolute, unlike Mozilla & NS. I've changed "position:absolute" to "position:relative" and it works.
Code: Select all
<div style="width:100%; text-align:center; vertical-align: bottom; position:absolute; top:33%; padding:0px; visibility:visible; margin:0px;"><img src='whatever.gif'></div>EDIT: Bah, I am not awake today. Mozilla and NS don't like this kind of positioning... I'll try some more...
EDIT 2: Well, looks like IE is using the right border of a DOM-element when the position is set to absolute, unlike Mozilla & NS. I've changed "position:absolute" to "position:relative" and it works.