CODEWITHSUNDEEP
csshtml
Zhafur
Zhafur

Reputation: 1624

Floating div in the background

Tried to make a floating div, with a -1 z-index to be in the background all the time, but when I make it's position absolute, then it disappears. Also want to place it in the middle with y-repeat image.

.perchament{
    position:absolute;
    margin:0 auto;
    height:100%;
    background: url("image_assets/parchment.png") repeat-y;
    margin-top:25px;
    z-index:-1;
}

Upvotes: 1

Views: 102

Answers (3)

Michael Giovanni Pumo
Michael Giovanni Pumo

Reputation: 14784

Absolutely positioning elements should us "top" and other such positioning controls instead of margin etc and set a width and height.

    .perchament{
        position:absolute;
    top: 0;
    left: 0;
width: 500px;
        margin:0 auto;
        height:100%;
        background: url("image_assets/parchment.png") repeat-y;
        margin-top:25px;
        z-index:-1;
    }

Does that help?

I'd also avoid using a minus z-index. Instead, you could set this item to z-index: 1 and then set the container above it (with everything else inside) to z-index: 2.

OR, if it's just a background image you want, you could simply put that onto the BODY tag of the document instead of a div. The BODY or HTML element is always the bottom of the stack.

Upvotes: 0

Madara's Ghost
Madara's Ghost

Reputation: 175017

In this particular case, you'll need to add a width to your div (since it's absolutely positioned).

However, what's wrong with a background rule on the body element or something similar?

Upvotes: 0

sachleen
sachleen

Reputation: 31141

It disappears because there is no content in it and no width specified.

Add this to your CSS:

left: 50%;
width: 100px;
margin-left: -50px;

The width needs to be set and the left margin is always half of that.

DEMO

As others have said, why not just do a background image on the body?

body {
    background: url("image_assets/parchment.png") center repeat-y;
}​

Upvotes: 1

Related Questions