Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Mar 4, 2013, 08:59 PM   #1
nfdesign
macrumors newbie
 
Join Date: Mar 2013
Image file as a border on an expandable div

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!
nfdesign is offline   0 Reply With Quote
Old Mar 4, 2013, 09:23 PM   #2
lucidmedia
macrumors 6502a
 
Join Date: Oct 2008
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.
lucidmedia is offline   0 Reply With Quote
Old Mar 5, 2013, 12:03 AM   #3
fig
macrumors 6502a
 
Join Date: Jun 2012
Location: Houston, TX
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.
__________________
figdigital | @figdigital | dribbble
fig is offline   0 Reply With Quote
Old Mar 5, 2013, 03:30 AM   #4
nfdesign
Thread Starter
macrumors newbie
 
Join Date: Mar 2013
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?
nfdesign is offline   0 Reply With Quote
Old Mar 5, 2013, 03:50 PM   #5
fig
macrumors 6502a
 
Join Date: Jun 2012
Location: Houston, TX
More or less, yeah. Did a quick example for you.
__________________
figdigital | @figdigital | dribbble
fig is offline   0 Reply With Quote
Old Mar 5, 2013, 06:05 PM   #6
nfdesign
Thread Starter
macrumors newbie
 
Join Date: Mar 2013
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!
nfdesign is offline   0 Reply With Quote
Old Mar 5, 2013, 11:28 PM   #7
fig
macrumors 6502a
 
Join Date: Jun 2012
Location: Houston, TX
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.
__________________
figdigital | @figdigital | dribbble
fig is offline   0 Reply With Quote
Old Mar 6, 2013, 09:09 AM   #8
Apple Key
macrumors 6502a
 
Apple Key's Avatar
 
Join Date: Jan 2012
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.
__________________
You know what they say... once you go Mac you ain't never gonna go back.
Apple Key is offline   0 Reply With Quote
Old Mar 7, 2013, 05:04 PM   #9
Apple Key
macrumors 6502a
 
Apple Key's Avatar
 
Join Date: Jan 2012
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.
Attached Files
File Type: zip HTML.zip (273.6 KB, 22 views)
__________________
You know what they say... once you go Mac you ain't never gonna go back.
Apple Key is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Applescript: How do I scan an image to a file? moonman239 Mac Programming 2 May 11, 2014 04:40 PM
Possible to access Origional image file from texted image? (to view metadata) inck243 iPhone Tips, Help and Troubleshooting 2 Dec 7, 2013 11:47 PM
Why can't I get the middle image/div of three to center? mark! Web Design and Development 4 Oct 28, 2013 10:06 AM
Symbols in image file change kcll12 Mac Basics and Help 0 May 1, 2013 07:23 PM
Editing an image. (Add text and border) Abrexas iPhone and iPod touch Apps 0 Jul 18, 2012 11:46 AM

Forum Jump

All times are GMT -5. The time now is 11:49 PM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC