Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 02-20-2008, 06:39 PM   PM User | #1
altious
New to the CF scene

 
Join Date: Feb 2008
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
altious is an unknown quantity at this point
Need help with border height

I need help with this border
First I have an image like this:



It works perfect if my content height does not exceed my image height
However this is what happen if it exceed:



What can I do to make it like this:



My CSS is:

DIV#border {float:left; width:1003px; background:url(images/background_border.gif) no-repeat; }

Hope someone can help me with this. Thanks
altious is offline   Reply With Quote
Old 02-20-2008, 07:17 PM   PM User | #2
jcdevelopment
Senior Coder

 
jcdevelopment's Avatar
 
Join Date: Oct 2007
Location: Cowboy Nation
Posts: 2,171
Thanks: 173
Thanked 257 Times in 257 Posts
jcdevelopment will become famous soon enoughjcdevelopment will become famous soon enough
Code:
DIV#border {float:left; width:1003px; background:url(images/background_border.gif) repeat-y; }
see what happens when you do that!
jcdevelopment is offline   Reply With Quote
Old 02-21-2008, 03:50 AM   PM User | #3
altious
New to the CF scene

 
Join Date: Feb 2008
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
altious is an unknown quantity at this point
Thanks for the reply
After I did that it became like this:



Is there a way to not show the top part of my image and only show the below part of my image for the rest of the document if I exceed the height

I only want this part to repeat


Last edited by altious; 02-21-2008 at 03:55 AM..
altious is offline   Reply With Quote
Old 02-21-2008, 03:58 AM   PM User | #4
jcdevelopment
Senior Coder

 
jcdevelopment's Avatar
 
Join Date: Oct 2007
Location: Cowboy Nation
Posts: 2,171
Thanks: 173
Thanked 257 Times in 257 Posts
jcdevelopment will become famous soon enoughjcdevelopment will become famous soon enough
well you need to grab a gif or jpg of a middle section and set the main content to that picture, like so

Code:
#topBorder {
height:/*pic height*/
width:/*pic width*/
background-image:url(path/image.gif) no-repeat;
}
#middleBorder {
height:/*whatever you need*/
width:/*pic width*/
background-image:url(path/image.gif) repeat-y;
}
#bottomBorder{
height:/*pic height*/
width:/*pic width*/
background-image:url(path/image.gif) no-repeat;
}
then place it in the html, however big the middle gets, it will keep repeating with content.

If you need anymore help, let me know!!
jcdevelopment is offline   Reply With Quote
Old 02-21-2008, 05:37 AM   PM User | #5
altious
New to the CF scene

 
Join Date: Feb 2008
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
altious is an unknown quantity at this point
Thanks for the fast reply!
It works perfectly now
appreciate the help~
altious is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 10:36 PM.


Advertisement
Log in to turn off these ads.