Creating a CSS Graident Background Image for a Website in Photoshop

Pages: 1

Index »
Community »
Tech »
Creating a CSS Graident Background Image for a Website in Photoshop

2008-01-18 13:03:29

=Karma-Kills=: "Don't post while intoxicated."; +356|6864|England

Right,

Trying to make a background for my site using the age old 1px x 1000px image and then repeating it.

However, i absolutely phail at photoshop. Im trying to follow this but its not granular enough for me.

So, if someone could post a link to, or give me a really step-by-step guide of how to make a gradient block image that would be really appreciated.

So far im just starting at a white 1 x 1000px box not knowing how to even "insert a rectangle".

Thanks

2008-01-18 13:06:37

Ryan: Member; +1,230|7123|Alberta, Canada

Open a new document the size of your background. Go to the tool panel on the left and right click the pain bucket. Click Gradient. Go up top and choose the colors you want, then go back to your canvas and drag your gradient. Holding shift will keep your drag line straight, so your gradient isn't at an angle.

2008-01-18 13:10:49

Jenspm: penis; +1,716|7012|St. Andrews / Oslo

Is your gradient horizontal?

Like, black ---> white

or vertical, like:

Black
|
|
|
V
White

?

Because I believe there is a CSS code for horizontal gradients.

https://static.bf2s.com/files/user/26774/flickricon.png

2008-01-18 13:15:37

=Karma-Kills=: "Don't post while intoxicated."; +356|6864|England

Thanks for the reply. Ill need about half an hour to check it out though - my skills in PS are granny like.

Ill be back.

EDIT: Graident is like:

Blue
|
|
|
|
White

Last edited by =Karma-Kills= (2008-01-18 13:16:14)

2008-01-18 13:24:39

=Karma-Kills=: "Don't post while intoxicated."; +356|6864|England

Right it worked.

(But i fucked up the rest of my layout... zimmer shall be contacted soon)

2008-01-18 13:40:53

Zimmer: Un Moderador; +1,688|7036|Scotland

css layout should be the following:

body { background: url(background.png) repeat-x; }

This is because I am guessing you want it on the background. If you don't, just add that CSS into whatever part of the site you want it on. ( the inside of { } )

Pages: 1

Index »
Community »
Tech »
Creating a CSS Graident Background Image for a Website in Photoshop

Board footer

Jump to

BF2S Forums Creating a CSS Graident Background Image for a Website in Photoshop

Board footer