Home/ Questions/Q 9165809
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T14:59:37+00:00

I’m trying to position one div after another, easily achieved when the divs are

  • 0

I’m trying to position one div after another, easily achieved when the divs are positioned relatively, but I want each of these divs to fit the size of the browser.
I’ve very roughly achieved it using this method:

<div id="container">
<div id="test-1" style="background: url(../images/background-v2.jpg)"></div>
<div id="test-2" style="background: url(../images/background-v2.jpg)"></div>
</div>

CSS:

#test-1 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#test-2 {
    position: absolute;
    top: 101%;
    left: 0px;
    width: 100%;
    height: 100%;
    background: no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

So #test-1 scales to fit the size of the browser then when you scale down #test-2 also fits the size of the browser and so on. But I’ve achieved these by positioning them absolutely and setting #test-2 101% from the top, which I don’t want to do every time I add another div, thus the reason I’d like them positioned relatively while still retaining the scale to browser background images. If that is at all possible? Might it require jQuery?
I’m completely stumped on this one!

There was something else I couldn’t figure out with these background images as well, as they’re nested inside divs, when the browser size gets below about 750px in width, the background images become fixed, is there anyway they can always stay centre to the browser, basically overflowing the image off the left of the browser?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I haven’t used background images as I’m not really sure what you’re doing with them but here is a solution using jQuery for the sizing issue:

    <!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <style>
            .fill-browser{
                width:100%;
            }
        </style>
        <!-- uncomment the line below to include jquery, I had to comment it out for stackoverflow -->
        <!--script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script-->
        <script>
            $(function() {
                Resize();
            });

            //Every resize of window
            $(window).resize(function() {
                Resize();
            });

            //Dynamically assign height
            function Resize() {
                // Handler for .ready() called.
                var windowHeight = $(window).height() + 'px';
                $('.fill-browser').css('height', windowHeight);
            }
        </script>
    </head>

    <body>
        <div class="fill-browser" style="background-color:#aa0000;"></div>
        <div class="fill-browser" style="background-color:#00aa00;"></div>
        <div class="fill-browser" style="background-color:#0000aa;"></div>
    </body>
</html>
    • 0