Click to See Complete Forum and Search --> : Side column background images scroll problem


brumster
07-23-2009, 05:45 AM
Hi.
I've been trying to resolve an issue with the background images not tiling beyond the visible screen in the side columns.
You will see what I mean if you take a look at http://ermsrslywtf.x10hosting.com/admin/
I've tried (mostly randomly) adding all kinds of stuff but I'm stumped. I'm sure it's something quite simple (probably just adding the right line in the right place).
Can anyone shed any light?
Thanks.

6StringGeek
07-23-2009, 08:56 AM
If your intent for the left and right columns is for them to remain empty then you might try assigning the background to the body instead and ditching the left right columns. You don't need them if they're not going to hold any content.

vouzamo
07-23-2009, 10:18 AM
it's the 100% height that is stopping the background from repeating further than the page fold. Either build your layout so that you have a container with the three columns so that you don't need to specify a height for left or right OR as has been said drop the columns and modify the image to span the page and apply it to body.

brumster
07-24-2009, 04:27 AM
If I remove the "height:100%" from .column & #leftcol & #rightcol then the background image disappears altogether.
Also, the 3 columns are already within the #container.

I was planning to put some content in the side columns, but if nobody can tell why it's broken then I will have to use your suggestion of a page background. Oh well. That's CSS!

Andyram2k
07-24-2009, 06:59 AM
Hi Brumster,
If i was doing this, i'd do as the other guys mentioned. I would take the background images off the current left/right column divs and have the main bg on the body or #container style (whichever works best), with background-position: center. If you create the background image to be the full width across, have it repeat-y downward. You can then also set the background-color to be #000000 or whatever the ends of the image are, so it will appear to be seamless.

Hope this helps in some way :)