Home/ Questions/Q 7941275
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T23:37:12+00:00

I’m creating a website which is white, so I dont have any background assigned.

  • 0

I’m creating a website which is white, so I dont have any background assigned. But I want to add some blue gradient details on two parts of the website. #bg_top would be placed on the top to the left and #bg_bottom should be placed on the bottom to the right. Of course this is not working exactly the way I want…

This is how its displayed on my html:

<body>

<div id="bg_top"></div>

<div id="wrapper">
</div>

<div id="bg_bottom">
</div>

<footer>
</footer>

The #bg_top works perfectly. It does display itself behind the wrapper but the bg_bottom is giving me the problem as its well placed, but its visually between the wrapper and the footer. Therefore I used z-index but its also not working. Also the strange thing is that the bottom and left parametres dont make any difference. This is the CSS code:

#wrapper{
    width: 925px;
    height: 1355px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

#bg_top{
    width: 500px;
    height: 500px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-image: url('../_img/2_body/bg/bg_top.jpg');
    z-index: -1;
}

#bg_bottom{

    width: 500px;
    height: 500px;
    position: relative;
    float: right;
    bottom: 0px;
    right: 0px;
    background-image: url('../_img/2_body/bg/bg_under.jpg');
    z-index: -1;
}

Could somebody help me? I’ve tried everything…

thank you

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I already got to my answer… I needed the pictures to be behind the wrapper. The bottom picture sticked to the top right part of the footer and the top picture at the same level than the header. Thanks to the input I saw it was very simple…

     <body>

<header>

<div id="bg_top"></div>

</header>


<div id="wrapper"></div>


<footer>
<div id="bg_bottom"></div>
</footer>

</body>

    So after I applied absolute position and a z-index and picture as backgound done… behind the wrapper and in its place. This was the final CSS code:

    #bg_top{
    width: 500px;
    height: 500px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-image: url('../_img/2_body/bg/bg_top.jpg');
    z-index: -1;
}



#bg_bottom{

    width: 500px;
    height: 500px;
    position: absolute;
    background-image: url('../_img/2_body/bg/bg_under.jpg');
    bottom: 155px;

    Any other doubts maybe I can help…
    right: 0px;
    z-index: -1;
    }

    • 0