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

Posted on 2010-01-08
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
    LVL 12

    Expert Comment


    Author Comment

    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.
    LVL 4

    Accepted Solution

    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

    thanks!  sounds straightforward

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    737 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

    Need Help in Real-Time?

    Connect with top rated Experts

    21 Experts available now in Live!

    Get 1:1 Help Now