Help - Search - Members - Calendar
Full Version: creating a layout with a widescreen header
Forums > Resource Center > Graphics Help
shynomi
i have a client that is wanting their band's layout in the vein of this:

www.myspace.com/sevenagesmusic

they basically just want their top picture wide like that page has it.
i noticed it kind of blends into the background as well.

here's another site like that: www.myspace.com/pathwaytoprovidence

anyone know where i can find any codes for this type of layout?
Nate
ZeT0
Open your background.psd up, or what ever you made it in, make the header AS you make the background, make it over lap etc etc.
( NOTE: BACKGROUND NEEDS TO BE INCREDIBLY LONG. )
Once made, obviously slice the header out, and save background. ( With the overlapped images. )
Then upload header and background as usual, but in your code change your ;
background-attachment: fixed;
to ;
background-attachment: scroll;
And that's it.
I hope that helped. If you didn't understand, message me and we can talk on MSN or something.
- ZeT0
deadmellotron
Moved to Graphics Help.

That may have been a little confusing for the original poster Zet0.

Alright, what you're going to do is find your main image / design. Make it roughly 1600-1800 pixels wide. It should definitely be inbetween there. Once you have your design all ready, you need to isolate the background image from the middle content. You're going to cut out 800 pixels of the layout. Your best bet is to use the image that's 1700 pixels wide. Alright, a simple way of thinking this is what is 1700 - 800? That's 900, so you're going to divide that by 2 and you get 450. So grab your selection tool and start at these coordinates:

x - 450
y - 0

That should show up on your navigator. You may have to change the units first.
Then you drag your selection tool and make sure the width is 800px. Then cut it out of the image, not copy. To do that, press ctrl x. Now you have your background ready so save that for web and devices. Then open a new photoshop document and paste what we cut out in there, and now you have your top banner.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.