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.

Answer 2

If your div has a fix width, you can manage it with two divs and two background images:

HTML:

<div class="topDiv">
     <div class="botDiv">
           content goes here
     </div>
</div>

CSS:

.topDiv {
    background: url( topImage.gif ) center top no-repeat;
}
.botDiv{
    background: url( bottomImage.gif) center bottom no-repeat;
}

If your div has a fluid width, you could use the same technik, but then with four divs.

It's no clean method, but it works.

Answer 3

You can do this with background images, without creating extra elements.

See this fiddle.

.cert {
  min-width: 212;
  min-height: 166;
  background: 
    url(http://i.stack.imgur.com/ghI7u.png) left -106px top -83px no-repeat, 
    url(http://i.stack.imgur.com/ghI7u.png) right -106px top -83px no-repeat, 
    url(http://i.stack.imgur.com/ghI7u.png) left -106px bottom -83px no-repeat, 
    url(http://i.stack.imgur.com/ghI7u.png) right -106px bottom -83px no-repeat, 
    white;
  padding: 40px;
}

Also, you can combine the four corner images for faster downloads: