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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help with border height

    I need help with this border
    First I have an image like this:



    It works perfect if my content height does not exceed my image height
    However this is what happen if it exceed:



    What can I do to make it like this:



    My CSS is:

    DIV#border {float:left; width:1003px; background:url(images/background_border.gif) no-repeat; }

    Hope someone can help me with this. Thanks

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Code:
    DIV#border {float:left; width:1003px; background:url(images/background_border.gif) repeat-y; }
    see what happens when you do that!

  • #3
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply
    After I did that it became like this:



    Is there a way to not show the top part of my image and only show the below part of my image for the rest of the document if I exceed the height

    I only want this part to repeat

    Last edited by altious; 02-21-2008 at 04:55 AM.

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    well you need to grab a gif or jpg of a middle section and set the main content to that picture, like so

    Code:
    #topBorder {
    height:/*pic height*/
    width:/*pic width*/
    background-image:url(path/image.gif) no-repeat;
    }
    #middleBorder {
    height:/*whatever you need*/
    width:/*pic width*/
    background-image:url(path/image.gif) repeat-y;
    }
    #bottomBorder{
    height:/*pic height*/
    width:/*pic width*/
    background-image:url(path/image.gif) no-repeat;
    }
    then place it in the html, however big the middle gets, it will keep repeating with content.

    If you need anymore help, let me know!!

  • #5
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the fast reply!
    It works perfectly now
    appreciate the help~


  •  

    Posting Permissions

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