The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

Is this possible? (background question)

  • # March 17, 2009 at 2:51 pm

    I would like to create a page that has a textured background and bookend the content with two graphic images. I have made two different pages each with one background idea but I am wondering if it is possible to have both at the same time. Also, it would be ideal if the bookends move as the user scrolls so the they bookend the content the user is reading (like the first example below).

    The two pages are here:

    Thanks for your help!

    # March 17, 2009 at 3:22 pm

    This reply has been reported for inappropriate content.

    Just have your textured background repeating on the body as usual.

    Re-create your ‘bookend’ graphic as a png24 with a transparent background.

    Add an extra page wrapper, eg.#outer_wrapper, centre it, give it the width of your graphic and set your png graphic as its background: no repeat fixed.

    Does that make sense?

    # March 18, 2009 at 11:50 am

    Thank you and yes it does make sense. I have done what you said and the bookends are there but now I am wondering if there is a way to get them on top. In other words the page wrap background image is cutting off the bookend image. It would be ideal if the bookends butted up against the white content box. Is that possible?

    Here is the page I have made with your advice <;

    Thank you so much!

    # March 18, 2009 at 12:32 pm

    This reply has been reported for inappropriate content.

    Just do the same thing with your page wrap image as you did with the bookend one. Lose the background texture layer so you are left with the white strip and the shadow effect on either end and save as a png24.

    Don’t forget that if you want the transparent images to work in IE6 you will need to add one of the many ‘fixes’ available. My own favourite is

    # March 18, 2009 at 2:13 pm

    Thanks, worked perfectly!

    # March 18, 2009 at 2:33 pm

    This reply has been reported for inappropriate content.

    Cool! No worries.

    Tell me to mind my own business if you like but I just noticed that you have a horizontal scrollbar in Firefox. If you want to get rid of it change this line in your CSS

    html { overflow : scroll; }


    html { overflow y: scroll; }
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed