Grow your CSS skills. Land your dream job.

CSS expand/grow background problem!

  • # June 25, 2009 at 9:58 pm

    Hi guys,

    Please take a look at the file in the attachments. I have a project Im doing for a client, and in the main content area they have a background that should grow if there is more content. I have provided a mock design of essentially what the layout looks like.
    My Problem is for some reason I cant seem to figure out how to go about getting the background to grow nicely.

    I’ve tried adding a top image, and a bottom image directly into the html, and having a center piece strecth vertically. Normally that would work, but because the background curves, I seem to have some issues with it.

    Any help would be much appreciated.

    Thanks!

    # June 26, 2009 at 6:01 pm

    So, do I understand correctly that it needs to grow vertically, not horizontally?

    You can still have it grow vertically like you are thinking as long as you taper the round shape so that in the middle you have several pixels that run straight down. Then you can define a top curved image, bottom curved image, and a background image that is just a solid line.

    The only other way I can think of that you would want to do it is to fade the bottom of the curve to the background color, then that allows you the freedom to grow the cell without damaging the look when it expands.

    # June 29, 2009 at 3:15 pm

    hey thanks for replying. And sorry for the late reply. I didnt think anyone would respond, havent had much luck here :/ Anyway Im glad you did. After tweaking my site all week, I came up with a solution of my own. I basically make the curve one big vertical image, that should never have to repeat, thus fixing it, the problem is the way the curve ends my client does not like.

    So after reading your solution, The first one wont work because they want the curve, and that would look more straight going down. So I think your on to something with the fading example you gave me, but I’m a bit confused on how that would work. Lets say it fades out as the page grows vertical, at the bottom it could very well be all white correct? The client definetly wants the image to still be visible even at the bottom. Anyway to go about this?

    # June 29, 2009 at 3:37 pm

    Sorry but it’s not possible with CSS. CSS doesn’t do curves.

    It may be possible with SVG but then ie users would be forced to download a plugin.

    The only other alternative I can see is Flash, again it wouldn’t be easy, requiring some pretty fancy actionscript to change the arc of the curve as the page lengthens, plus all the problems you get just by having a Flash website.

    Either stick with your big image and hope the content never spills over or change the design.

    # June 29, 2009 at 4:16 pm

    Thanks for the hasty reply!

    Yes I tried to tell my client its bascially not possible, and that it would need a redesign(which btw I did not do), but they dont want to really hear that, especially seeing the project is due in a matter of a day or two.

    Its sad, but I really just dont know what to do…The flash suggestion sounds interesting, but I neither have the time, nor the know how to do something like that right now. My only solution left if I dont use the big image, is to just make it exactly fit, but if there ever is more content..it will completely break, and thats what Im afraid of. But the client wants this done, so I guess thats what I will have to do.

    I feel like this is going to bite me in the arse a month or two down the road, but for the sake of my project, AND my sanity I believe this is the best way to go about this..

    ARGH!

    Thanks for the feedback guys, If anyone know maybe any other solution that wont take much time to do, please please respond ASAP.

    Thanks again in advance !

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".