Image file as a border on an expandable div

[nfdesign]

What is the best way to go about using an image file as a border around the main div of a webpage that will be growing vertically as new blog posts are added to the page.

Can be a repeating image on the left and right sides but not sure how to do the top or bottom that way.

thanks for the help!

 

[lucidmedia]

The CSS3 border-image property is probably the easiest way to do this, but there is no support for IE, so you will need to plan for the site to degrade gracefully.

Google for the CSS3 specification.

Tools like http://border-image.com can help you visualize the source image you will need to create.

 

[fig]

You could cheat a bit for a crossbrowser solution and use 2 divs, one with the image repeated as the background-image and the second inside it with a 10px margin (or whatever) so that the first shows evenly all the way around it.

 

[nfdesign]

Lucidmedia: I have read about css3 border-image, but I do not think it will go over well to abandon ie.

Fig: can explain a little more on your solution?

Do you mean a div repeating entirely and a white div inside to turn the image div into a frame?

 

[fig]

More or less, yeah. Did a quick example for you.

 

[nfdesign]

thanks a lot for that...I am not sure if it will work but I will give it a shot the image I am trying to use as a frame is on this site

http://peaceandhotness.com/blog/?page_id=20

So I may be able to make it repeating and look ok on the top and bottom, we'll see. Otherwise I may have to go with the CSS3 route.

Thanks for your help!

 

[fig]

Glad to help. And I getcha, I think you most likely will have a slight hitch in the pattern somewhere with your example.

You could do something pretty similar to make that work though, just make it 3 divs with the top edge and bottom edge in their respective divs, then the middle div reveals the side patter as necessary. The bottom edge probably won't quite match up at the corners (unless you get lucky), but I don't know that that's avoidable with any method for a pattern like that. You might be able to tweak the bottom piece so that it blends a bit better too.

 

[Apple Key]

This is a very interesting question. I haven't run into this situation myself but it does present to be a problem.

I can think of two ways to do this. One is to have the blog posts be the same height as each other and then calculate it so that they line up perfectly (probably not doable, as you will probably want different amounts of content per post). The other way is to use jQuery to resize the height of the the div with the background image as necessary to make it line up (it could be made to round up or down to the nearest height of the pattern, for example.

 

[Apple Key]

Here is an example using jQuery to adjust the height of the content so that the border is seamless. Let me know if you have any questions or need any help.