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 2 of 2
  1. #1
    Regular Coder boogily's Avatar
    Join Date
    Jul 2009
    Posts
    275
    Thanks
    18
    Thanked 4 Times in 4 Posts

    -top: creates gap. How do I fix gap?

    I am working on a dynamic background for a site. This is how it works

    Base layer has repeating background image for background
    Next layer is a graphic that fades into the base layer.

    The thing is, I have to move the top of "next layer" up by -122px. due to it's overlapping image that fades to the base layer. (there is transparency).

    This works great, but creates a 122px gap at the bottom of the base layer. Any tricks how to fix that gap?

    www.scorpionwear.com/hdwp

    CSS
    Code:
    ------------------
    BASE LAYER:
    ------------------
    #content {
        background: url("../images/contentBkg.png") repeat-y scroll left top transparent;
        margin: 90px auto 0 -23px;
        overflow: visible;
        padding: 0;
        position: relative;
        padding:0;
        z-index: 20;
        width: 1000px;
    }
    ---------------------------
    next layer (overlapper)
    ---------------------------
    .contentTop {
        background: url("../images/contentBkgTop.png") no-repeat scroll left top transparent;
        position: relative;
        top: -122px;
        width: 1000px;
    }
    The actual contents show up in a layer with no BG image. so it goes

    Code:
    <div id="content">
      <div class="contentTop">
         <div id="noBgImage">CONTENT</div>
      </div>
    </div>
    Can anyone help remove the gap or suggest a better way to do this? Thx
    Joomla Development Company and MN SEO
    "Joomla development from design to SEO"

  • #2
    Regular Coder boogily's Avatar
    Join Date
    Jul 2009
    Posts
    275
    Thanks
    18
    Thanked 4 Times in 4 Posts
    Any help please???
    Joomla Development Company and MN SEO
    "Joomla development from design to SEO"


  •  

    Posting Permissions

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