Borders - Image borders using multiple HTML objects

Back to Backgrounds  Tutorials  Web Studio

Mulitple division borders

This technique uses an image with a border, two colored divisions and one division that uses a tiled background. All together this will produce a layered look you can use as a background for an image or the page.
You can drag these divisions or floats out or in to any size you want.

burl.jpg

• Drag an HTML object onto your page
  

• Paste this into an HTML object make it 120 pixels larger than your image each way.
  

<div style ="width:100%; height:100%; 
border-width:3px;
border-style:ridge;
border-color:gray;
background-color:#A52A2A;
-moz-box-sizing: border-box;
box-sizing: border-box;"> </div>

• Drag another HTML object onto your page
  

• Paste this into an HTML object make it 80 pixels larger than your image each way.
  

<div style ="width:100%; height:100%; 
border-width:3px;
border-style:ridge;
border-color:gray;
background-color:#BDB76B;
-moz-box-sizing: border-box;
box-sizing: border-box;"> </div>

• Drag another HTML object onto your page
  

• Down load the burl.jpg above
  

• Attach the image to the html object
  

• Paste this into the HTML object and make it 40 pixels larger than your image each way.
  

<div style="width:100%; height:100%; 
background-color: white;
background-image: url($thisfolderurl$burl.jpg);
border:2px ridge gray;
-moz-box-sizing: border-box;
box-sizing: border-box;">
</div>

• Now place your picture and center all of the objects vertically and horizontally
  

• Paste this code into the pictures "object tag"

style =" border-width:3; 
border-style:ridge;
border-color:#696969;
-moz-box-sizing: border-box;
box-sizing: border-box;"

• Preview

This is what that will look like

Got a question, or want to leave a comment!

Note: You must be logged in to add comments

You can also ask at the WS forum too