homepage Welcome to WebmasterWorld Guest from 54.167.179.48
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

    
Can you make a background GIF tile the page width only once?
Don't want a gradient GIF to repeat
jastra

5+ Year Member



 
Msg#: 3978225 posted 1:05 pm on Aug 25, 2009 (gmt 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

 

Alternative Future

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3978225 posted 1:51 pm on Aug 25, 2009 (gmt 0)

Hi

How about repeat-x does this work?

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

HTH

-Gs

jastra

5+ Year Member



 
Msg#: 3978225 posted 3:59 pm on Aug 25, 2009 (gmt 0)

Thanks but no, can't get that to work.

jastra

5+ Year Member



 
Msg#: 3978225 posted 4:06 pm on Aug 25, 2009 (gmt 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.

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3978225 posted 5:43 pm on Aug 25, 2009 (gmt 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.)

jastra

5+ Year Member



 
Msg#: 3978225 posted 5:58 pm on Aug 25, 2009 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved