Welcome to WebmasterWorld Guest from 54.147.134.218

Forum Moderators: not2easy

Message Too Old, No Replies

Can you make a background GIF tile the page width only once?

Don't want a gradient GIF to repeat

     
1:05 pm on Aug 25, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 24, 2005
posts: 173
votes: 0


I have a background gif, 1 X 800 pixels. It's a gradient, darker at the top, lighter at the bottom.

Is it possible to only have the gif tile across my 900 pixel-wide page ONCE?

My problem is that if a given page is 800 pixels deep or less, the background is OK. But say the client wants to add more material and the page grows to more than 800 pixels, then there's the dark top of the background gif as the tiling starts over again.

I want to set the page background color to the color of the very bottom of the gradient and therefore have no depth color issues regardless of how long the page grows.

Thanks

1:51 pm on Aug 25, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 22, 2003
posts:1022
votes: 0


Hi

How about repeat-x does this work?

background-image: url(image.jpg);
background-repeat: repeat-x;

HTH

-Gs

3:59 pm on Aug 25, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 24, 2005
posts: 173
votes: 0


Thanks but no, can't get that to work.
4:06 pm on Aug 25, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 24, 2005
posts: 173
votes: 0


Alternative,

Yes, your CSS suggestion worked after all. I missed an accursed semicolon in the code and was too wrapped around the axle to see it.

Thanks for your help.

5:43 pm on Aug 25, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


When doing this, if you haven't already, crop your background to 1 pixel wide X however deep you want it, it will load faster. Make sure the "last color" in the bottom of the gradient is a web-safe color so it doesn't form a line.

You can also use CSS shorthand:

background: #your-color url(image.jpg) repeat-x;

Where "your-color" is the bg color (#ffffff, etc.)

5:58 pm on Aug 25, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 24, 2005
posts: 173
votes: 0


Aha-- so that's the source of the lines when I'm using custom colors.
Thanks.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members