HAY GUYS

Erocental · Local time: Mar 11, 2006, 02:58 AM

Hi!

I've just made a 12 x 1200 gradient .jpg for my site. Problem is when the page gets large enough the gradient just starts from the top again. Is there any way I can code the page to just keep stretching the image? I'm using Dreamweaver 8. Thanks!

Jam it back in, in the dark.

Snowknight · Mar 10, 2006, 10:00 PM

Out of interest, where is this gradient being used?
You should be able to accomplish a working effect with CSS.

There's nowhere I can't reach.

Erocental · Local time: Mar 11, 2006, 03:00 AM

It's being used on my site updates page, and it gets pretty long. =(

This thing is sticky, and I don't like it. I don't appreciate it.

Stealth · Local time: Mar 10, 2006, 09:01 PM

Make the image a background, have it not repeat, and make the background color correspond to the last bit of color on the gradient. It won't stretch the gradient, but it won't look like shit either.

Then you could just make the gradient very large. Though that's not recommended.

I am a dolphin, do you want me on your body?

Duminas · Local time: Mar 10, 2006, 07:03 PM

Setting the background to "repeat-y" by means of CSS should take care of this for you. However, I also advise you to attach the background to the left or right edges of the browser, so that if someone (probably rare) comes along with 1280x1024 or up, it will not look iffy for them. Also, follow what Stealth mentioned above about the colours matching on one edge--the edge you'd want to do this to is the edge to which the background is not attached.

To do this, open the Design panel, then add a new CSS style by your best means (a little "+" icon on the CSS tab should allow this). Apply the style to the body tag (in a new stylesheet or inline, it does not matter), and when that comes up, set the background as appropriate. You may want to remove styling from the <body> HTML before you do this, though.

Right-click, Page Properties, then clear the background and that should be taken care of. I do not have Dreamweaver available right now, so I cannot help much further aside from giving you raw CSS code. If you cannot get this done by means of the GUI and want the code, let me know.

I was speaking idiomatically.

Erocental · Local time: Mar 11, 2006, 03:18 AM

I am using 1280 x 1024, hehe! ^^;

My gradient image is attached. I've tried the repeat stuff before but it just looks all messy no matter what i do with it.

What kind of toxic man-thing is happening now?

Duminas · 10:31 PM

You use it vertically like that? Then switch "repeat-y" from above to "repeat-x", and switch the attachment I talk about earlier to either top or bottom.

CSS would be like this:

Code:

body { background: #b7bae6 url(bg_grad.jpg) bottom left repeat-x; }

Of course, alter the url() as appropriate (to account for image directories and such). If you want to inject it directly into that page, you can do this by one of two means.

Ignore the below, as you seem to have already gotten it taken care of. I just added this in case you needed it.

First Method:
Add the below code between your <head> and </head> tags:

Code:

<style type="text/css">
body { background: #b7bae6 url(bg_grad.jpg) bottom left repeat-x; }
</style>

Or the Second Method:
Alter your <body> tag to reflect this:

Code:

<body style="background: #b7bae6 url(bg_grad.jpg) bottom left repeat-x;">

I advise you use the first method, if not opting for an external stylesheet outright.

FELIPE NO

Erocental · Local time: Mar 11, 2006, 03:28 AM

Genius!

Thanks so much for that Duminas! And thanks for everyone elses suggestions! I owe you one!

What, you don't want my bikini-clad body?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
FLV to AVI/WMV problem	Minoko	Help Desk	6	Jun 12, 2008 07:58 AM
router problem (I think)	Inhert	Help Desk	2	May 27, 2007 05:10 PM
Problem with video playback =\	Mimi-kun	Help Desk	3	Dec 23, 2006 04:15 PM
car problem	Bredow	General Discussion	6	Jun 29, 2006 07:41 AM