SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    applying an image for divs as borders

    Hello everyone. First of all, I'd like to apologize in advance if I'm breaking any guidelines. My first time posting here and I hope I'm doing it right. I did check the pinned topics and I didn't find any information that could help me regarding my problem. =[

    Anyways, here's my question in a more detailed form:

    How do I go about using a custom image as borders for my divs? Am I right to assume that I'll be needing 3 images; with one each for the bottom and top to act as the corners, and another for the middle part that keeps repeating to scale itself depending on the amount of content it contains? If so, what is the proper way to do it?

    Any relevant replies would be greatly appreciated. Thank you and good day !

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi achobaba. Welcome to SitePoint.

    Nothing wrong with your question at all. As long as the div has a fixed width, the repeating image for the sides will be fine. However, you can only have one background image on the div, so the top and bottom borders may need to be contained in separate divs (unless you just have the images in the HTML, but that's not the best idea, as they are just presentational so are better served with CSS).

    So, one way to do it is to have an extra div above and one below the main div, each with its won background image. Does that makes sense?

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Here is a simple tut on it showing what Ralph just said.

    { visibility: inherit; } Vertically Liquid Round Corner Box

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Another way to do it is to use a single large image in the html and scale it to fit. Results do depend on the type of the image used though and of course the extra image in the html is a bit of a pain but possibly less pain than multiple divs.

    In css3 we can size background images with background-size to achieve a similar effect.

  5. #5
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much sirs ! Your comments and links really made me understand it better. I'm going to try it out now. Again, thank you !


Bookmarks

Posting Permissions

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