CSS (decorative) scroll border on all 4 edges of a page area

Posted on 2010-01-08
Medium Priority
Last Modified: 2012-05-08
we have a page that has the main content area (all of the page, but centered horizontally for the case that the browser window is larger than the content area (and a dull solid background color will show to either side of the main area).
For that main area, there's a decorative "scroll" type of border which we have as a raster image (4 images - top, two sides, bottom - all this strips).
(the client is in love with it and won't budge - it's a horrible scan, inherited, but that's beside the point).
I need to repeat the scroll borderon the vertical edges for as tall as the page is, but then when the bottom of the page comes, stop the repeating vertical image on the edges and put in the bottom horizontal scroll image.

How to accomplish this such that it renders reasonably cross-browsers.

Question by:willsherwood
  • 2
LVL 12

Expert Comment

ID: 26243232

Author Comment

ID: 26272927
here's an in-progress mock-up, the bottom space is a marquis area which will be variable in height depending on announcements, sales, etc.

Accepted Solution

ruidovisual earned 2000 total points
ID: 26285375
If your main content area is gonna have defined width you'll need 3 main div's: header content and footer. You'll have to join the two side images into one single image that you'll use as background of your content div, the others will be your header and footer bg's.

You have to be careful with the sidesImage and the bottomImage. In the sidesImages case, be sure it can make a loop, i mean, the top end of the image will have to be able to join the bottom end. And then, when you have placed your content, may be your bottom image won't match with the content background; in that case you could make some javascript to calculate the content height based on the sidesImage height as a ratio.

But try this first and if you feel you need help with the js let us know
<div id="header">
<div id="content>
your content
<div id="footer">

#header{background:url(topImage.jpg) no-repeat;}
#content{background:url(sidesImage.jpg)repeat-y left top;}
#footer{background:url(bottomImage.jpg) no-repeat;}

Open in new window


Author Closing Comment

ID: 31675603
thanks!  sounds straightforward

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month14 days, 1 hour left to enroll

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question