Adding a border to a DIV in CSS

Hello All,

I have a image which is an image of picture frame. In my main page I have a div box which contains all my content. I want to be able to add the image picture frame as a border to my div so it looks like all my contet is inside the picture frame! any ideas how i can do this in css?

Thanks for your help

 

Yes give the div a class, so something like:
<div class="choosename">
CONTENT INSIDE PICTURE FRAME
</div>

Then inside the CSS you would have

.choosename {
background: url(linktoimageofframe.gif) no-repeat;
padding: 20px;
}

OK, so you change the url of the background to the image of the picture frame, this will set the picture frame as the background of the DIV, so it looks like a border.

However the text will overlap this, as it starts at the top of the DIV so we need to add padding, the amount of padding you will need depends on the size of your picture frame, I have chosen 20px, but if the frame is bigger and smaller you can change it to suit your needs.

The above method assumes that the DIV is a set height, so the picture frame is always the same height, if the height of the DIV is variable, then you will need to set more background images as slices, e.g one bck image for the top part, one bck image for the sides, and one bck image for the bottom.. So you would need 3 elements to set these background images, e.g 3 DIV's, or 1 DIV and 1 Paragraph and 1 Unordererd list etc.......

 

thanks for your reply. I was actually thinking of a varibale size div in the last option you mentioned..but it seems more complicated. does this mean i would have to slice up my image in photoshop? and i still dont understand where i would put the 3 divs!

 

Yes by variable I mean is the content of the DIV going to be a variable height. Like do you want the picture frame to extend and reduce dependant upon the height of the content..rather than it being a fixed size?

Then you would have to slice it into 3 images, top sides and bottom obviously if you want the frame to change height.

Well you could use 3 DIV's, something like this:

<div class="top"></div> /*This Empty DIV Holds the Top Part of the Frame*/
<div class="middle">THE CONTENT GOES IN HERE</div> /*This Holds the Sides of the Frame*/
<div class="bottom"></div> /*This Empty DIV Holds the Bottom of the Frame*/

Then the CSS would be something like:

.top { background: url(linktotopslice.jpg) no repeat; }
.middle { background: url(linktosides.jpg) repeat-y; }
.bottom { background: url(linktobottom.jpg); }

This uses 2 empty DIV's, which hold the top and bottom part of the frame. The middle background image then repeats down the sides of the DIV, so the content can be of any height.

You could get away without using the 2 empty DIV's, if the frame was to be a fixed height, or we could use other elements rather than DIV's, it depends what's going inside the frame all the time.

 

ah yeah..! thanks for your help! I'll give it a try!