CSS layer question

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?:blush:

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.

very simple. Just make these changes below

Code:

---


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 */

---

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

Quote:

---

Originally Posted by chadlly2003

very simple. Just make these changes below

Code:

---


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).

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:

Attachment 17580

Do you think that this is possible?

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.

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;
}

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..

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.

If you don't want the side columns to have the image add either of the following, based on what you prefer:

Image (like the main background)
#navColumnOne, #navColumnTwo {
background-image: url("../images/row_4.jpg");
}

Color (of course you need to set the value you prefer, as ff0 is just a sample)
#navColumnOne, #navColumnTwo {
background-color: #ff0;
}

Quote:

---

Originally Posted by 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.

---

YESS!! that's it :) Thank you sooooo much..

Quote:

---

Originally Posted by LadyoftheCave

YESS!! that's it :) Thank you sooooo much..

---

Welcome, glad I could help.