Using an image as a border
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 posted this at 17:01 — 8th February 2009.
She has: 11,421 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
Megan
Connect with us on Facebook!
decibel.places posted this at 17:15 — 8th February 2009.
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!
and don't you love these "webmasters" who can't figure out the sig code is html not bbcode?
decibel.places posted this at 17:12 — 8th February 2009.
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...
drewgrantt1 posted this at 11:09 — 8th July 2010.
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.
Cheap Web Design
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.