Spice up images - create image watermark borders

[carney]

Hey can someone give me the scripts so i can add this:

Spice up images - create image watermark borders - vBulletin.org Forum

Thanks guys!

 

[HAiDER]

i want this too please

 

[Hoxxy]

Open up a blank page in notepad, and we're first going set up some style definitions.

Comments are inside each rule.

<style type="text/css">
DIV.image
{
    width: 675px;
    margin: 0 auto;
    margin-bottom: 40px;
    clear: both;
    /*This creates the bigger-picture frame/location where we will put all of our elements */
}

DIV.image Div.TopBar
{
    height: 50px;
    background-image: url( 'topbar.png' );
    background-repeat: repeat-x;
    float: left;
    /*This repeats the topbar over and over at the top to create a bar. The image itself is actually a very small vertical line */
}

DIV.image Div.TopBarEnd
{
    height: 50px;
    width: 50px;
    background-image: url( 'topbar_end.png' );
    background-repeat: repeat-x;
    float: left;
    /*This is the curly ending for the top left corner bar*/
}

DIV.BottomBar
{
    clear: both;
    position: relative;
    top: 350px;
    height: 50px;
    /*This sets up the very bottom bar */
}

DIV.image Div.Title
{
    display: inline;
    padding-left: 20px;
    padding-top: 2px;
    background-repeat: no-repeat;
    height: 16px;
    vertical-align: bottom;
    padding-right: 8px;
    color: #7a0;
    /*This sets up the properties for the text in the top left*/
}


DIV.BottomBarEnd
{
    float: right;
    width: 50px;
    height: 50px;
    background-image: url( 'bar_bottom_end.png' );
    background-repeat: no-repeat;
    /*This is actually the very bottom right corner curly piece */
}

DIV.BottomEndLeftInfo
{
    float: left;
    width: 50px;
    height: 50px;
    background-image: url( 'bar_bottom_end_l.png' );
    background-repeat: no-repeat;
   /* This is the ending curly piece in the bottom left corner */
}
DIV.BottomLeftInfo
{
    float: left;
    background-image: url( 'bar_x.png' );
    background-repeat: repeat-x;
    height: 50px;
    padding-top: 30px;
    padding-left: 8px;
    /*This repeats the bottom left bar over and over at the top to create a bar. The image itself is actually a very small vertical line */
    
}
</style>

Now here is the actual code. What happens is that we make the picture the background, and we place the borders on it.

<div class="image">
 <div style="width: 575px; height: 450px; background-image: url('2.jpg'); background-repeat: no-repeat;">
        <div class="TopBar">
                <div style="padding: 5px; white-space: nowrap;">
                    <div class="Title">Posted By David hasselhoff</div>
                            </div>
        
            </div>
            <div class="TopBarEnd">&nbsp;</div>
            <div style="position: relative; top: -75px;">
            
            </div>
            
        <div class="BottomBar">
            <div class="BottomBarEnd"></div>
                    <div class="BottomLeftInfo">www.ZomgStuff.net</div>
                    <div class="BottomEndLeftInfo">&nbsp;</div>
        </div>
    

    
    </div>