Repeating Background Problem

[swenson_designs]

Hey all,

A little new to this CSS stuff so I apologize if this question has been asked before. Just refer me to the answer if it has already been asked.

Anyway, I’m going step-by-step through Chris’ converting PSD to HTML/CSS in hopes of getting a nice custom design for WordPress. I encountered a problem already!! I need a background that fades from gray to black and it also has an overlay of diagonal stripe pattern. When I go to crop an area (32px 700px) it repeats but not anything like I need it to. I have attached the mock up for you to see what I mean. I also need the bottom to always be black so when you get down to the footer it is always black by the time you reach that.

Also, does anyone know how American Eagle Outfitters ( http://www.ae.com/ ) is able to put an image behind their main content so that it looks like it’s peaking out from both sides? It looks like one large image but I don’t think that would be very CSS friendly? Maybe I’m wrong…probably so. Thanks so much in advance for your help.

Thanks,
Nick

[gheidorn]

The American Eagle site is using a 1500×1500 background image with eagles in strategic spots.

http://www.ae.com/Images/homepage/webse … g_main.gif

[gheidorn]

With regard to your mock-up, you could create a background image like AE.com using your gray lines fade to black. Make it large enough like they did (1500×1500), then also supply a default background-color of black so if you have a page that scrolls past where your gray fades to black, then the background will just be black from there on.

Code:

body {
background: url(myGrayLinesFade.png) #000 no-repeat;
}

[swenson_designs]

Hey, thank you!! I’ll give it a try.

[Author]

Posts