.jpg Gradient problem

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!

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.

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

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

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.

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.

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.

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.

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!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
FLV to AVI/WMV problem	Minoko	Help Desk	6	Jun 12, 2008 08:58 AM
router problem (I think)	Inhert	Hardware and Networking Zone	2	May 27, 2007 06: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 08:41 AM