PDA

Click to See Complete Forum and Search --> : Background Gradient

malikah
03-05-2006, 01:38 PM
Hello, could someone please tell me how I can create a gradient as a background on my webpage. Here is an example:

http://www.macromedia.com/

Thank you kindly :)
malikah
03-05-2006, 02:20 PM
Assuming you are using a vertical gradient strip (go to www.macromedia.com then right click on the background and save the background as...):

1. Using Dreamweaver, Open the Modify menu and choose Page Properties.

2. Type the location of the image in the Background Image box, or click on the Browse button to locate and select the image(the one you saved from macromedia.com for example).

3. Select the repeat -x option.

4. Click OK.
JayM
03-05-2006, 03:11 PM
If you don't want to use Dreamweaver, you could also do the following:

Open a new document in photoshop, 800x20.
Grab your gradient tool
Select your desired foreground and background colors.
Select "Foreground to Background", and apply the gradient.

Save your document as gradient.jpg or whatever format you prefer.

Here's the css code:



#background {
background: url ('/images/gradient.jpg') repeat-x;
}


EDIT: I just noticed you answered your own post.
pcthug
03-05-2006, 06:12 PM
it would be:
body {background: url(/images/gradient.jpg) repeat-x;}
pcthug
03-05-2006, 06:16 PM
it would be:
body {background: #aaa url(/images/gradient.jpg) repeat-x;}
JayM
03-05-2006, 07:07 PM
it would be:
body {background: #aaa url(/images/gradient.jpg) repeat-x;}


Evidently, I was not thinking. I made a div :eek:
felix_the_cat
03-14-2006, 06:19 PM
This is a nice effect.

I am a beginner just building my first page. I can create this gradient if i put it in the html file but I cant get it to happen if i put it in the css file.

body {background: C:/felix web/images/(gradient.gif) repeat-x;}

I think it is a syntax error, i have tried putting "" around things, putting %20 between /felix%20web/, removing the path, putting the path in the barckets, using background-image instead of background... i cant get it to work!

If someone could advise me please? Much appreciated!

Felix
felix_the_cat
03-14-2006, 06:20 PM
also.. i have tried using the #aaa but i don't know what that does. Can someone explain that too please?

Thanks!
Eldwick
03-14-2006, 07:27 PM
Did you put
<link rel="stylesheet" type="text/css" href="style.css" /> in your header tag?

If your still having trouble try
body {background: url("images/gradient.gif") repeat-x)}

LoL and malikah wtf is up with talking to yourself, scitsofrenic much?
pcthug
03-14-2006, 07:48 PM
add the following between your <head> and </head> tags:
<style type="text/css">
body {background: #aaa url(/images/gradient.jpg) repeat-x;}
</style>
felix_the_cat
03-15-2006, 12:10 AM
i still cant get it to work...

I think it's the syntax of the URL, what should i put for it? Its in this folder:
C:/felix web/images/

i've tried putting file:///C:/...

And i've tried quotes around all the different options and parts, I've tried backslashes instead and every combination of option I can think of and it still cant get the image and put it in there. My CSS is working for all other formatting, and there is no overriding background image or color in the html file...

Any ideas? Thanks =)
pcthug
03-15-2006, 12:26 AM
Try all of the following:

body {background: #aaa url(file:///C:/felix%20web/images/gradient.gif) repeat-x;}

body {background: #aaa url(file:///C:/felix%20web/images/gradient.jpg) repeat-x;}

body {background: #aaa url(file:///C:/felix%20web/images/gradient.png) repeat-x;}
felix_the_cat
03-15-2006, 01:19 AM
Ahhh.. thanks heaps pcthug!! Finally! =)

I thought that it would stretch the image down the y-axis though... in the example site above (http://www.macromedia.com/) the image is streched to the length of the window - mine stops after it reaches the length of the original gradient.

Is there some other trick for this or do i have the wrong idea about how it works?
pcthug
03-15-2006, 01:37 AM
Macromedia's gradient stops too. Only there background color matches the darker side of the gradient, creating an illusion, where you won't notice the transition from the gradient image to a plain background color.
Simply change the #aaa value to the same as the bottom-most color of your gradientbody {background: #aaa url(file:///C:/felix%20web/images/gradient.gif) repeat-x;}
felix_the_cat
03-15-2006, 02:59 AM
Legend! Thanks!!
pcthug
03-15-2006, 04:40 AM
No worries