Welcome to WebmasterWorld Guest from 54.225.38.176

Forum Moderators: not2easy

Message Too Old, No Replies

vertical background repeat problem

     
10:42 pm on Jan 5, 2007 (gmt 0)

New User

5+ Year Member

joined:Jan 5, 2007
posts:4
votes: 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.

11:52 pm on Jan 8, 2007 (gmt 0)

New User

5+ Year Member

joined:Jan 5, 2007
posts:4
votes: 0


do I need to reword this question? I really need help with this...
12:34 am on Jan 9, 2007 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts: 646
votes: 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...

12:35 am on Jan 9, 2007 (gmt 0)

Preferred Member

10+ Year Member

joined:Aug 11, 2005
posts:386
votes: 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
11:24 pm on Jan 9, 2007 (gmt 0)

New User

5+ Year Member

joined:Jan 5, 2007
posts:4
votes: 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]

11:37 pm on Jan 9, 2007 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts:646
votes: 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]

7:13 pm on Jan 10, 2007 (gmt 0)

New User

5+ Year Member

joined:Jan 5, 2007
posts:4
votes: 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