homepage Welcome to WebmasterWorld Guest from 54.227.20.250
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
vertical background repeat problem
tangler

5+ Year Member



 
Msg#: 3209902 posted 10:42 pm on Jan 5, 2007 (gmt 0)

I'm a beginner web designer learning CSS as I go. What I have is a page that I designed in photoshop and sliced up into images.

I have a text box in the center of the page. This text box is width: 775px; height:460px.

When more text is added than space provided it throws the whole page out of whack. So I cut out a horizontal piece of the page that I would like to repeat vertically to create a text area growth.

I want the growth to come from the center of the text box.

Before I show my code and describe the problems I am having with doing this I wanted to know if this is even possible.

 

tangler

5+ Year Member



 
Msg#: 3209902 posted 11:52 pm on Jan 8, 2007 (gmt 0)

do I need to reword this question? I really need help with this...

Setek

5+ Year Member



 
Msg#: 3209902 posted 12:34 am on Jan 9, 2007 (gmt 0)

Before I show my code and describe the problems I am having with doing this I wanted to know if this is even possible.

You might have to post some code anyway, because from the details you've given, there's not much indication of certainty there.

I for one don't know if it's possible or not, because I don't know how you've coded the page. In theory, a background repeating vertically should have no problems at all, so...

Don_Hoagie

5+ Year Member



 
Msg#: 3209902 posted 12:35 am on Jan 9, 2007 (gmt 0)

It does sound a bit confusing... at least to me. I'm sure whatever you're asking is certainly possible, just unsure of a) what you mean, and b) how your page is coded, which may very well be the problem

tangler

5+ Year Member



 
Msg#: 3209902 posted 11:24 pm on Jan 9, 2007 (gmt 0)

ok, here is a link to the page that I am refering to: <ooops>

This is the code that I tried in my CSS that doesn't work (and is not applied right now):

padding:0;margin:0;
background-image: url(images/portfolio_repeat_y.jpg);
background-position: 0px 200px;
background-repeat: repeat-y;
background-color: #000033;

Even though I made the background position at 200px, it just covers the page from top to bottom behind the table of images. So what is the correct syntax?

[edited by: SuzyUK at 7:39 pm (utc) on Jan. 10, 2007]
[edit reason] Please no URLs see TOS and Charter [/edit]

Setek

5+ Year Member



 
Msg#: 3209902 posted 11:37 pm on Jan 9, 2007 (gmt 0)

Even though I made the background position at 200px, it just covers the page from top to bottom behind the table of images. So what is the correct syntax?

Unfortunately, that kind of is the right syntax :) You can't vertically push a vertically-repeating background image - only horizontally (and vice versa for horizontally repeating backgrounds.)

So, to solve your problem, you might have to restructure the way you are coding - perhaps have padding on an element in front of the background image instead of margin, it depends on the effect you want to create.



...

P.S. Please remember you're not allowed to post URIs like that - for future reference, people with the same issue who try to read this post to find a solution may take a look at your website to see if their problem matches yours, only to find your website is perfectly fine and problem free. For more information check out Webmaster World's Terms of Service [webmasterworld.com] and our CSS Forum Charter [webmasterworld.com].

[edited by: SuzyUK at 7:40 pm (utc) on Jan. 10, 2007]
[edit reason] tidying [/edit]

tangler

5+ Year Member



 
Msg#: 3209902 posted 7:13 pm on Jan 10, 2007 (gmt 0)

Sorry about the link, I didn't even consider the issue it would arise down the road. About the padding solution you mentioned, could you please embellish on that? Thanks for the speedy responses.

-Cam

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
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