Attach images on all four corner of DIV

Question

I have a DIV which has a red dotted border all around:

HTML for the DIV:

    <         


        

Answer 1

Set position: relative on your container div, and position: absolute on the images in conjunction with top, bottom, left, and right pixel values, i.e:

#img2 { position: absolute; bottom: 0px; left: 0px; }

Absolutely positioned elements are removed from the page flow and thus won't interfere with any other elements inside the container div (text, other graphics, headings and so on).

Or, if your container div is a fixed (set pixel value) size, just use background-image instead for all four corner images and save yourself some page loading time.