View Full Version : How to place an image in the margins...

12-10-2010, 09:22 PM
I'm trying to place this image (http://www.americanchic.net/website_graphics/test_ornament.png) in the left margin of my website (http://www.americanchic.net/) (see example of what it should look like here (http://www.americanchic.net/temporary/tempspread.jpg)) or below:


I would like to place the ornament graphic with the least amount of disruption to the main structure of the website. I'd simply like to lay it in or over the margin but I'm worried that I'll have to change the HTML around. It will only be a temporary (holiday) graphic...

12-11-2010, 12:20 AM
Hello jihanemo,
Place this line anywhere in your markup - <img src="http://www.americanchic.net/website_graphics/test_ornament.png" id="orn" />

And position that absolutely with this bit of CSS -

#orn {
height: 250px;
width: 160px;
position: absolute;
top: 0;
left 0;
z-index: 1;
#outterwrapper {

overflow: hidden;
background: #ffffff;
-moz-box-shadow: 0px 0px 10px #bbbbbb;
-webkit-box-shadow: 0px 0px 10px #bbbbbb;
width: 815px;
padding: 10px 20px 0 20px;
margin-top: 25px;
margin-right: auto;
margin-left: auto;
position: relative;
z-index: 2;

12-14-2010, 08:56 PM
That's GREAT! Thank you! Will try out the code tonight.