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

    Unhappy Positioning 1 div relative to another

    Hi there, I am a total newbie, currently in the trial-and-error process of learning HTML & CSS to create a personal website. To give a little background, my site will be based on art & photography, so preserving the resolution & aspect ratio of my images is very important.

    For my homepage, I am trying to set a background image to have a fixed height, to always grow and shrink with the size of the page, and to be anchored in the upper left corner. It NEEDS to maintain its aspect ratio, meaning that depending on the size of the window, there may be dead space to the right.

    I am OK with this, and I would like to create divs repeating horizontally RELATIVE to where my original background image ends. This way I know just where the repeating image(s) starts & can feather the transition in Photoshop to be seamless (essentially repeating the edge of the main image to infinity). Since My main image is based on a percentage of the height, I don't know exactly where it will end in the window.

    How do I create a repeating div that always STARTS where the main picture ends? (preferably dealing with percentages rather than pixels)

    Here is my code. I tried using the background element to set these pictures, but had trouble with this as well, so I tried using div ID's and seemed to have more control. Any advice would be GREATLY appreciated. Thanks!!

    #background-1 will be the repeating image
    #background-2 is the image that I'd like to preserve.


    <meta content="text/html; charset=ISO-8859-1"
    <title>Carolyn Pender</title>
    <style type="text/css">

    html, body {margin: 0; padding: 0; height:100%}

    #background-1 {position:fixed; top:0; left:0; width:100%; height:92%;z-index: 1;}
    #background-2 {position:fixed; top:0; left:0; height:92%; z-index: 2;}
    #footer {position: fixed; bottom: 0; left: 0; width:100%; height: 8%; z-index: 3; background: #333366;}

    <div id="background-1">
    <img style="height: 100%; width: 100%;" src="bgtest1.jpg;" alt="test;">
    <div id="background-2"><img style="height: 100%;"
    src="background_index.jpg;" alt="Background;"></div>
    <div id="footer"><style="bottom: 10%;="" left:="" 0;="" width:=""
    100%;="" background:="#333366"></style="bottom:></div>
    Last edited by brightside; 03-14-2012 at 06:18 PM.


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