Grow your CSS skills. Land your dream job.

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:
    <http://www.thishope.org/contact/contact.htm&gt;
    <http://www.thishope.org/contact.php&gt;

    Thanks for your help!

    # March 17, 2009 at 3:22 pm

    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 <http://www.thishope.org/contact.php&gt;

    Thank you so much!

    # March 18, 2009 at 12:32 pm

    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 http://www.twinhelix.com/css/iepngfix/.

    # March 18, 2009 at 2:13 pm

    Thanks, worked perfectly!

    # March 18, 2009 at 2:33 pm

    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

    Code:
    html { overflow : scroll; }

    to

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".