Grow your CSS skills. Land your dream job.

Repeatable Header

  • # May 18, 2009 at 4:03 pm

    I worked with a designer to develop a new website for a non-profit in town. The vision he had for the site was to have an artistic header that wasn’t a rectangle but used different integrations of lines. My question is how to properly repeat this image to accomodate larger screens?

    Live Example:
    http://www.athenschurch.com

    Screenshot:
    http://www.athenschurch.com/images/headerbg.jpg

    # May 18, 2009 at 4:07 pm

    Easiest way would probably be to make a very wide header background image and align it centre. Since it’s greyscale its file size shouldnt be too big, and will save on markup.

    # May 18, 2009 at 5:00 pm

    One thing you didn’t mention is how you want the header aligned?

    Do you want it aligned left (so it’s always the same distance from the left side of the screen) or aligned centered?

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

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