Welcome to WebmasterWorld Guest from 23.23.46.20

Forum Moderators: not2easy

vertical background repeat problem

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

5+ Year Member



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)

5+ Year Member



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

10+ Year Member



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)

5+ Year Member



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)

5+ Year Member



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)

10+ Year Member



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)

5+ Year Member



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

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month