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

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: