Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Creating an image border around a div

    Hello everyone,

    I have a PhpBB forum. I've been trying to add an image border around a div, but I can't seem to get it to work.

    Basically, I want to have the images on each side of the "wrap" div. But no matter what I try the images don't seem to show up in the right spot.

    Any ideas?

    HTML
    Code:
    <div class="border-left">
    <div class="border-right">
    <div class="border-top">
    <div class="border-top-left">
    <div class="border-top-right">
    
    <div id="wrap"></div>
    
    <div class="border-bottom"><span><span></span></span></div>
    </div>
    </div>
    </div>
    </div>
    </div>
    CSS
    Code:
    .wrapborder {
    min-width: 650px;
    width: 900px;
    margin:0 auto;
    }
    
    #wrap {
    	padding: 0 20px;
    	min-width: 650px;
    	width: 900px;
    	margin: 0 auto;
    }
    
    /* Border
    ---------------------------------------- */
    .border-left { 
        background: url("{T_THEME_PATH}/images/border_left.gif") repeat-y 0 0;
    }
    
    .border-right {
        background: url("{T_THEME_PATH}/images/border_right.gif") repeat-y 100% 0;
    }
    
    .border-top { 
        background: url("{T_THEME_PATH}/images/border_top.gif") repeat-x 0 0; 
    }
    
    .border-top-left {
        background: url("{T_THEME_PATH}/images/border_top_left.gif") no-repeat 0 0;
    }
    
    .border-top-right {
        background: url("{T_THEME_PATH}/images/border_top_right.gif") no-repeat 100% 0;
    }
    
    .border-bottom { 
        background: url("{T_THEME_PATH}/images/border_bottom2.gif") repeat-x 0 100%;
    }
    
    .border-left, .border-right, .border-top, .border-top-left, .border-top-right, .border-bottom { width: 100%;}
    
    .border-bottom span {
        background: url("{T_THEME_PATH}/images/border_bottom.gif") no-repeat 0 0;
        display: block;
        height: 18px; 
    }
    
    .border-bottom span span { 
        background-position: 100% -18px;
    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,462
    Thanks
    23
    Thanked 634 Times in 633 Posts
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •