asked on

Some CSS help to centralises an variably sized image with no effect on surrounding divs.

Hi,

I am creating a dynamic front cover for a report as part of a web application. The front cover has:

a) A Title
b) A centralised image which can be any size.
c) Right, bottom aligned text block containing name and address details.

I need the image layer to take any size of image without it impacting the other text blocks. So I guess I need the image layer to be central to the page and it to be on top of the other divs.

So I guess I will have the following:

<div id="title">My Title</div>
<div id="Image" style="position:absolute;z-index:100.... centralise css ??? etc etc"><img src.../></div>
<div id="AddressBlock" style="bottom, right ???>Address data....</div>

Thanks for any help,

Sam

ASKER CERTIFIED SOLUTION

OmniUnlimited

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Kim Walker

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Kim Walker

I forgot to mention that "width: 100%" equals the window width PLUS margin and padding. Be sure your body doesn't have any margins or padding.

SamJolly

ASKER

Thanks folks,

Can you confirm whether any of these solutions will enable the image to be any size and not affect the positioning of the address block. With my "layer" example I designing for the image to overlay the address block due to its "Z-Order". The "Title" and "Address" blocks are fixed in location.

Thanks,

Sam

Kim Walker

Yes. The image will be centered regardless of size and will be clipped to 1200 pixels in height in my example. You can increase the height if you want, just be sure to increase the negative top margin to half the height. The image will cover up the title and address block since it has a higher z-index.

OmniUnlimited

I am not understanding what you are saying. If you fix the title and the address blocks so that they never move from the page, and you set the image in an element that will expand to whatever size the image is, if your image exceeds the distance between the title and the address block it will cover up the address block. Is this the effect you are looking for?

SamJolly

ASKER

Hi,

I have resolved this now. A big thank you to all.

Sam

SamJolly

ASKER

thnks