View Full Version : Webpage border length problem

06-19-2010, 02:10 AM
I'm making my forum and I'm having an issue, im trying to make a border around my main content 'block' and the border i want to make out of pre-made images, such as a chrome effect, that iv made in photoshop. I firstly made a div at the top to contain the 'top' part of the border image and that has worked, the next part was the two side borders that run parallell left and right of the main content, they are also in seperate div's, the only problem that im having and getting quite frustrated with to be honest is that the image i have to put in the border i want to run to the end of the page and no further, so in other words it auto fits with page length, iv tried making a image with a height of 1000px, but at the minute my webpage just goes on for ever because this border image is so large. Is there anyway to make it go to the length of the webpage and no further? This is mainly because nearly all my pages have different page lengths and im trying to edit it as part of the template with only the content area excluding parts like the navigation bar and borders as being an editable region.
Thanks and sorry if this is confusing :grin:

06-19-2010, 03:18 AM
look at background-repeat in css, thats the usual way

06-19-2010, 08:01 AM
Agree with Ed here. If you insert the image into the HTML div then that div will stretch the full length of the image. If you set it as a background in CSS as Ed has suggested then you can set the height of the div (usually by adding content in or around it) and the image will only partly show based on the height.

Hope that helps :)

06-19-2010, 09:51 AM
Hi thanks for the reply i forgot about setting the image as back ground and that seems to work, the only other problem im getting now is setting the div of the left border to extend to the bottom of the page, at the moment its just a little block with my border contained in it, it doesnt extend to the bottom, im guessing its to do with the css, heres the css of the left border div:

#wrapper #mainBorder #leftBorder {
width: 37.5px;
background-color: #4D4D4D;
height: auto;
float: left;
margin: auto;
background-image: url(../images/leftBorder.jpg);
background-repeat: repeat;

Any ideas?
Thanks :smile:

06-20-2010, 02:19 AM
if you add an image as background to the wrapper div the same width as the side bar but and repeat-x it will repeat to the bottom. this will create the effect of the side bar continuing to the bottom