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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Background Image Repeat Down Both Sides

    I seriously need some help with this. I'm redesigning my detachment's website (which I am now in charge of) and have been racking my brain with this for the last few hours.

    I need to have an image repeat down the left and right sides, but as you know, with html/css you can only have on background image. So here's what I have:
    Code:
    <style type="text/css">
    body {
        margin:0;
        padding:0;
        background:#000000 url(sidepanel.png) left top repeat-y;
        height:100%;
    }
    #bkgnd2 {
        position: absolute;
        top: 0px;
        right: 0px;
        height:auto;
        width:100%;
        min-height:100%;
        background:transparent url(sidepanelrev.png) right top repeat-y;
        text-align:center;
        }
    * html #bkgnd2 {
        height:100%;
    }
    
    </style>
    </head>
    <body>
    <div id="bkgnd2">
    </div>
    </body>
    And this is what I get:

    As you can see, it works, only it stops after the initial page. If I were to scroll all the way up, it looks good, but once you scroll down, the image stops repeating on the right side. Any ideas on how to fix this?

    (It does this is both Firefox and IE.)

  • #2
    Regular Coder
    Join Date
    Oct 2005
    Location
    Newberg, Oregon
    Posts
    252
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Maybe it's just me, but aren't you basically just having one background, and a content container in centered? That seems to be what you're attempting, and taking that approach will make it a LOT easier for you.

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Yeah, just set ONE background image on the html of your site. If the image you want is slightly different on each side then as long as you have a fixed layout this will be easy. Just create an image that is wide enough to span the width of your page and have tha repeat-y... as long as you have centered your page and set the background position to center everything should line up fine too.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #4
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, but what if you do need two different backgrounds?
    I have the same background image but I need it two pixels higher on the right.
    my page is 1015 pixels and centered.

    I think it's easier to set the background-image on the body for the right part.
    So that is what I did so far. Now I only have to find a mechanism for the left part.


  •  

    Posting Permissions

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