Question

I wrote the following code of centered background image based on a example that I found on the internet. Now I need to add a 300px width box on the right, with a certain alignment based on top and right, but my code does not work.

    <style type="text/css">

        #bg {
            position: fixed;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
        }

        #bg img {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            min-width: 50%;
            min-height: 50%;
        }

        #box 
        {
            position: absolute;
            width: 300px;
            top: 200px;
            right: 100px;             
            background-color: White;
        }

    </style>

    <div id="bg">
        <img src="bg.jpg" alt="">
        <div id="box">
            <p>some</p>
            <p>some</p>
            <p>some</p>
            <p>some</p>
            <p>some</p>
            <p>some</p>
            <p>some</p>
            <p>some</p>
            <p>some</p>
            <p>some</p>
        </div>
    </div>

Answer 1

You have to move the #box outside #bg (for example, make them siblings).

Other option is to define your #bg as this:

    #bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

and then #box will appear. The problem is that #bg won’t behave as a “global” background, because if the former overflows the viewport, then the latter won’t resize to hold it.