Home | All Questions | alt.html FAQ >

How do I position images at all four corners of a div?

+---------------------------------+
|+---+                       +---+|
||   |                       |   ||
||   |                       |   ||
|+---+                       +---+|
|                                 |
|                                 |
|                                 |
|                                 |
|                                 |
|+---+                       +---+|
||   |                       |   ||
||   |                       |   ||
|+---+                       +---+|
+---------------------------------+

Absolutely position the images, specifying top:0, right:0, bottom:0 and left:0 where appropriate. You'll have to position the div so it can act as a container for the positioned images.

div.container   { position:relative; /* etc. */ }
img.positioned  { position:absolute; height:63px; width:122px; }
img#topleft     { top:0;    left:0; }
img#topright    { top:0;    right:0; }
img#bottomleft  { bottom:0; left:0; }
img#bottomright { bottom:0; right:0; }

<div class="container">
<img src="image.gif" class="positioned" id="topleft">
<img src="image.gif" class="positioned" id="topright">
<img src="image.gif" class="positioned" id="bottomleft">
<img src="image.gif" class="positioned" id="bottomright">
<!-- etc. -->
</div>

Recommended Resources

Discussion

Related Questions