CSS layer question

[LadyoftheCave]

Hi all,

I am using an old version of my webstore to experiment with the design.

I am using the following CSS code:

html {
background-image: url("../images/grotachtergrond.jpg");
margin:0 15px;
background-repeat: repeat;
background-position: top ;
height: 1600px ;
}




body {
color:#9a9a9a;
font: 12px arial, sans-serif;
margin:0 15px;
background-image: url("../images/bovenkantbody2.jpg");
background-position: top ;
background-repeat: no-repeat;
height: 588px ;
}


/*wrappers - page or section containers*/
#mainWrapper {
background-image: url("../images/grotachtergrondwit.jpg");
text-align: left;
width: 910px;
vertical-align: top;

}

Now the mainwrapper picture is above the body picture.
http://www.merlins-cave.nl/oudecavestore/

How can I place the body picture above the mainwrapper picture?

[carlwhat]

i am not exactly sure what you are trying to do.

the problem looks to be here:

includes/templates/premium5b/css/stylesheet.css

line 287

#logotop has a height of 400px. reduce that to what you want and things look better.

best.

[chadlly2003]

very simple. Just make these changes below

 
html {
    background-image: url(../images/grotachtergrond.jpg);
    margin: 0 15px;
    background-repeat: repeat;
    background-position: top;
    height: auto;

}

#logotop
    position: relative;
    height: 32px;    
    margin: 0;
    padding: 0;
    background:#000;  /* optional make what ever color you want */

[LadyoftheCave]

Thank you :) :) I will try that tomorrow..

[LadyoftheCave]

very simple. Just make these changes below

 
html {
    background-image: url(../images/grotachtergrond.jpg);
    margin: 0 15px;
    background-repeat: repeat;
    background-position: top;
    height: auto;

}

#logotop
    position: relative;
    height: 32px;    
    margin: 0;
    padding: 0;
    background:#000;  /* optional make what ever color you want */

Hi Chaddly. I have tried this, but Unfortunatelly it only removed the body-image instead of placing the body-image in front (over the white block).

[LadyoftheCave]

Right now the website looks like this:

http://www.merlins-cave.nl/oudecavestore/

There is a huge white block (#mainWrapper {) over the image of (body {)
I want the image of (body {) being placed above the white block, so that it would look something like:



Do you think that this is possible?

[carlwhat]

yes.

in /oudecavestore/includes/templates/premium5b/css/stylesheet.css
line 45

remove the background image.

adding that white image to the bottom part would be a little more configuring..

best.

[keneso]

To remove the top white image do as carlwhat suggested.

To have it where you want find #

#indexDefault {
margin-top: 15px;
}

and change it to

#indexDefault {
margin-top: 0;
background-image: url("../images/grotachtergrondwit.jpg");
padding-top: 19px;
}

Recaping you should have these

#mainWrapper {
text-align: left;
width: 910px;
vertical-align: top;
}
#indexDefault {
margin-top: 0;
background-image: url("../images/grotachtergrondwit.jpg");
padding-top: 19px;
}

[LadyoftheCave]

Dear Kenso,

Thank you very much for you coding. Unfortunatelly with the coding, only the main index page became white, but I wanted the mainwrapper to be white, not only at the front page, but at every productpage. But unfortunatelly the mainwrapper starts at the top of the page, over the merlin-picture. So I was hoping that there is a way to place the background-image: url("../images/bovenkantbody2.jpg"); over the mainwrapper at the top..

[keneso]

Sorry I had not understood.

Try this please:

#contentMainWrapper {
margin: 0;
background-image: url("../images/grotachtergrondwit.jpg");
}

You would need to change your text color.