Using an image as a border

They have: 7 posts

Joined: Feb 2009

I'm working on a site for my in-laws:

shiversbbq.com

I made the header and sidebar using slices with photoshop but I want to continue the wood border into the right and bottom of the main content. What is the best way to do this?

Thanks!

Megan's picture

She has: 11,419 posts

Joined: Jun 1999

Could you please explain why a user named nikee posted this exact same question on January 13th?

http://www.webmaster-forums.net/html-css-and-javascript/using-image-border

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

I guess nikee got married and her in-laws are cutting off her BBQ until the site is finished! Sticking out tongue

and don't you love these "webmasters" who can't figure out the sig code is html not bbcode?

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

that's a really cute site!

The problem is that you are building with blocks of images, rather than using html containers and applying background images to them.

your bottom right image is (size adjusted to fit here):

so the only way to extend the wood border is in a graphics editor (Photoshop, Gimp) and you need to match up the separate pieces too. That is what I would recommend at this point, but in the future you can plan your sites with CSS.

I suggest you try looking at these tutorials W3Schools and tizag.com

and try this live demo

some more resources about graphical div borders

http://upwithabang.com/articles/css-graphic-borders.html

http://www.bigbaer.com/css_tutorials/css.triple.border.background.tutori...

They have: 5 posts

Joined: Jul 2010

Yep, that can’t be done with CSS - yet. I believe CSS 3, which isn’t supported by the popular browsers yet will be making this available. Instead, put images on the background and position them that way…

The code which I want to suggest you is:
body {
margin-left: auto;
margin-right: auto;
margin-top:15px;
width: 779px;
background-color: --------;
font-family:Verdana,Helvetica,Arial, sans-serif;
font-size:12px;
color:#fff;
border-right: The Image
border-left: The Image
border-top: The Image
border-bottom: The Image
}
I think that this will give you the proper solution.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.