Exploding Garrmondo Weiner Interactive Swiss Army Penis

Exploding Garrmondo Weiner Interactive Swiss Army Penis (http://www.gamingforce.org/forums/index.php)

- Help Desk (http://www.gamingforce.org/forums/forumdisplay.php?f=36)

- - .jpg Gradient problem (http://www.gamingforce.org/forums/showthread.php?t=1540)

Erocental

Mar 10, 2006 09:58 PM

.jpg Gradient problem

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

Mar 10, 2006 10:00 PM

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

Stealth

Mar 10, 2006 10: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

Mar 10, 2006 10: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

Mar 10, 2006 10:18 PM

1 Attachment(s)

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

Mar 10, 2006 10:25 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

Mar 10, 2006 10:28 PM

Genius!

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

All times are GMT -5. The time now is 01:22 PM.