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 !

Hi achobaba. Welcome to SitePoint. :slight_smile:

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?

Here is a simple tut on it showing what Ralph just said. :slight_smile:

{ visibility: inherit; } Vertically Liquid Round Corner Box

Another way to do it is to use a [URL=“http://www.pmob.co.uk/temp/images/photobg.png”]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.

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 !