how do I turn my bg color to look like a gradient image?

[rcw]

1) Script Title: gradient image

2) Script URL (on DD): http://tools.dynamicdrive.com/gradient/

3) Describe problem:

How do I turn my bg color to look like a gradient image? I want the background color of my rss scroller to be like a gradient color.

[ddadmin]

It depends on the dimensions of the RSS scroller, but assuming it's long in width and shorter in height, you'd want to tile the gradient background image horizontally. Using global CSS, something like:


#rssdivid{
background: white url(gradient.jpg) top left repeat-x;
}

The gradient image is assumed to be a slim and tall image, for example, 5px width by 300px height.

[rcw]

Thank you looks simple enough and yes its wide and short. But do I have to remove any of the script that deals with the back ground from the original before I insert your suggestion?

[ddadmin]

It depends on which script exactly you're talking about...

[rcw]

the script that sets up the scroller box that comes with the demo.

*Example CSS for the two demo scrollers*/

#pscroller1{
width: auto;
height: 100px;
border: 1px solid black;
padding: 5px;
background-color:lightsteelblue;
}


.rssclass .rsstitle{
font-weight: bold;
}

.rssclass .rssdate{
color: black;
font-size: 85%;
}

.rssclass a{
text-decoration: none;
}

</style>

[ddadmin]

Inside #pscroller1, you'd have something like:


#pscroller1{
width: auto;
height: 100px;
border: 1px solid black;
padding: 5px;
background: white url(gradient.jpg) top left repeat-x;
}

[rcw]

:confused:hmm..unfortunately all that gave me was a white background

[thetestingsite]

Where it says gradient.jpg, it has to be an existing image. You can use the gradient image tool here on DD, or make your own using image creation software. To change the background color if there is no image, simply change the below code in red.



#pscroller1{
width: auto;
height: 100px;
border: 1px solid black;
padding: 5px;
background: white url(gradient.jpg) top left repeat-x;
}


Hope this helps.

[ddadmin]

To recap what thetestingsite is saying, make sure "gradient.jpg" is the correct path to your "gradient.jpg" image on your site. When in doubt, use an absolute URL, for example:


background: white url(http://www.mysite.com/gradient.jpg) top left repeat-x;

[rcw]

Yup I did all those things...made a gradient image using your tools, uploaded to my server, even used the full url to the gradient image I just uploaded but the background of the box was just white(blank).

I will try to make a new gradient image again but I looked at my file (gradient.jpg) and it looks fine.

I do have two scrollers on my page, maybe thats the prob? I only tried adding a gradient image for the first one.

Will try it again soon...

[thetestingsite]

If all else fails:

Please post a link to the page on your site that contains the problematic script so we can check it out.

Hope this helps.

[rcw]

have a look at the scrollers

www.respcareforum.com

[thetestingsite]

When I go to http://www.respcareforum.com/gradient.jpg (which I pulled from the css in your source code), I get a 404 (file not found) error. This means that the file is not at the location you specified. If you upload your gradient.jpg file to the server and make sure that the name is the same, this should fix the problem.

Hope this helps.

[rcw]

what an idiot I am. the file was there but it was named gradient.JPG instead of gradient.jpg (lower case). That did the trick but the gradient looks grainy????

[thetestingsite]

You may want to use the png format. Usually, jpeg images make smaller file size but takes away from the quality. I usually use png for all my images just so that they don't lose their quality too much.

[rcw]

I will remember that, but another thing I just tried and it worked was that I made the gradient image 1 pixel wide, instead of 5 pixels wide as it was before. The 1 px wide image looks way better....

Many thanks for your assistance :D