Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Location
    Sweden
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Problem with background borders

    Hi,
    I'm creating a page where I want a centered main container of 960px width with a 10px gradient border on each side. (Se example at http://www.hem.skyrev.se/).

    At first I made a 980px wide 1px high image with repeat-y as background for the container. The problem was that I would sometimes get a 1px gap between the border and the content because the content centered slightly different than the image.

    I don't want to use border-image because I don't think it works with IE. So I created one left-div and one right-div, which you can see at the linked page, with individual background images. Here's my dilemma now: I want the borders to fill the window size completely. So I set container height: 100%. It looks great when I load the page but if my window is small and I scroll down the border ends right there. I thought I'd solve this with background-attachement: fixed so that the borders would no scroll with content. But this doesn't work at all since the image is positioned relative to viewport rather than the div.

    My current solution is to hardcode the height of the container to 1500px making sure it's never too small - but it's not a good solution.

    How would I solve this? I want a background border on each side of the container, which centers uniformly and fills up the window height and continues to do so if I have to scroll down.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Since you are using a fixed width to #main-container, it's very easy.

    Combine the two side backgrounds into a single horizontal strip with these two images at either ends. The image should have a width>980px and you'd need to set some left&right padding to #main-container
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Location
    Sweden
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for your advice. I thought I did this originally but now that I think of it I might have had the background applied to body rather than the container. So I belive this should work.

  • #4
    New to the CF scene
    Join Date
    Feb 2012
    Location
    Sweden
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok, I've tried your suggestion and it kind of helps but my problem is essentially the same. If I set the content's height: auto the border will end abruptly if the window is larger than the content. But if I set height: 100% it will end abruptly when I scroll down if my window is too small.

    I suppose I need to javascript an if-statement creating different styles depending on the window size. I'd prefer not having to do this so if there's another way please let me know.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Forgot to mention, to expand the container div to the maximum height, you need to initially set height:100%; to both body and html selectors. After that, set min-height:100%; to the container.

    PS: Lower version of IE may not accept min-height. But, you may specifically set height:100%; to overcome it, if required.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    alandor (02-15-2012)

  • #6
    New to the CF scene
    Join Date
    Feb 2012
    Location
    Sweden
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Works perfectly now! Many thanks!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •