Reply
Background trick
Old 06-26-2006, 09:56 PM Background trick
frofi's Avatar
Extreme Talker

Posts: 215
Location: London
Is there a way how to stop the background image from repeating it self vertically? I want to use a trick where the background image is 1280px wide but ends level with the google ads. I can stop the repeat altogether but when the background image is only 10px wide I need it to repeat, so it fills the width of the screen. The rest would be just background color. In other words I want the repeat to stop after one row. Is it possible?
__________________
THE FORCE is with me at last! All I need now is some TALKUPATION ;)
frofi is offline
Reply With Quote
View Public Profile
 
When You Register, These Ads Go Away!
Old 06-26-2006, 10:21 PM Re: Background trick
Experienced Talker

Posts: 45
I think I understand your question. You want to make the background repeat only once. so try this...

in your css file declare the background with an attribute of "no-repeat"

Now if you want that background to repeat to fill a certain random volume of horizontal space then stop the only solution I can think of is boxing in the background via a div.

Hope that helps. Maybe someone else can explain this better then I can.
auron is offline
Reply With Quote
View Public Profile
 
Old 06-27-2006, 12:30 AM Re: Background trick
vangogh's Avatar
Post Impressionist

Posts: 8,831
Name: Steven Bradley
Location: Boulder, Colorado
You can use

background-repeat:repeat-x

so that the image will only repeat horizontally, but not vertically. Naturally there's a corresponding repeat-y value for the background-repeat property.
__________________
l Search Engine Friendly Web Design | Van SEO Design
l Tips On Marketing, SEO, Design, and Development | TheVanBlog
l Custom WordPress Themes
| Small Business Forum
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Old 06-27-2006, 02:47 AM Re: Background trick
collyer_1's Avatar
Extreme Talker

Posts: 169
Location: Southern Alberta, Canada
This should help: http://www.w3schools.com/css/pr_background-repeat.asp

If for some reason your background image isn't quite right you can write your background code like this:
Code:
background: url(images/background.jpg) 0 10px repeat-x #fff;
The "0 10px" are horizontal and vertical positional values that will offset your background within an element. You can replace them with other pixel values, percentages, em values, whatever suits your design needs (I seem to use 50% 50% quite a bit).

After the positional values you have your repeat information telling the graphic only to repeat along the x axis. Then following that there is a color value. This color will fill up all the space that your background doesn't within the affected element. You can leave is blank if you want it to be transparent around your background image.

Hope that helps!

Last edited by collyer_1 : 06-27-2006 at 02:56 AM.
collyer_1 is offline
Reply With Quote
View Public Profile Visit collyer_1's homepage!
 
Reply     « Reply to Background trick
 

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 


Page generated in 0.13243 seconds with 12 queries