Is there a way to do this? background tile & content shadow (pic inside)

Discussion in 'HTML & Website Design' started by wolfestone, Oct 12, 2007.

0
  1. #1
    here's an image of what I'm trying to achieve:

    [​IMG]

    The content area (white part) needs to be horizontally centered, and the stripe background needs to fill the whole page background regardless of window size or screen resolution.

    I can't figure out how to do this & end up with a polished look. The only way I would approach this would be having the shadow & stripes combined where they overlap, and using them as a background image in a container div which is wider than my content area div. Then I'd set the page background to the stripe image. But the strips wouldn't line up 100% of the time where the tiled background met the shadow/stripe image, depending on the window size.

    Is there any cross-browser solution to this, or will I have to pick between stripes or shadows & a solid background?

    Thanks for any help.
     
    wolfestone, Oct 12, 2007 IP
  2. eruct

    eruct Well-Known Member

    Messages:
    1,189
    Likes Received:
    49
    Best Answers:
    0
    Trophy Points:
    108
    #2
    Sure it's possible. Basically you will have your background image be one thin horizontal piece that includes stripes, shadows and white box.

    Sorry I don't have more time...
    Check this site here

    Which uses this image as their background...

    That should give you a general idea.
    Just make sure you set the image to repeat on the y axis.
     
    eruct, Oct 12, 2007 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    The background repeats every 10 px... so just chop it to 10px high, repeat it out wider than any screen you'd likely encounter in the next few years (3072px ought to do the trick - 50% over the highest my setup can run) and just put it on the body top center repeat-y;

    There is a problem with that though - firefux fux up centering the background the same as a container, meaning on some resizes you'll have 'overlap'. To address this I've found the best technique is to make the center area the same color as the last edge, then make your container DIV set to a 100% height model to draw the center. It means you sometimes have a 2px border on the left side instead of 1px, but that's hardly noticeable.

    This should do the trick:

    http://battletech.hopto.org/for_others/wolfestone/template.html
     
    deathshadow, Oct 13, 2007 IP
  4. wolfestone

    wolfestone Peon

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thanks guys, that will work perfectly.

    Deathshadow - just one quick question... Where you said make the center area the same color as the edge, do you mean the center area of the background image?

    Thanks again, it's good to know I can get this working and not have to modify my design.
     
    wolfestone, Oct 14, 2007 IP