CODEWITHSUNDEEP
htmlcssgoogle-chrome
tesseract4d
tesseract4d

Reputation: 41

Google Chrome (Windows 7) not displaying css layers

I'm working on a website with Google Chrome, and I haven't been able to get css layers to work. Because there was no rational explanation for why my browser wasn't displaying what the code said it should, I copy pasted code from this website (http://www.echoecho.com/csslayers.htm) which is also not displaying as it should be displayed when I copy-paste it into the source for my site. It displays the way it should when I view it online though. Any ideas on what the problem is?

Upvotes: 0

Views: 372

Answers (2)

Ryan McDonough
Ryan McDonough

Reputation: 10012

You need to set that image as the background in the CSS rather than have it as an image in the div e.g.:

background-image:url("http://www.webdesign.org/img_articles/9244/Gradient-Noise-Final.jpg") repeat-x;

Upvotes: 0

Paul DelRe
Paul DelRe

Reputation: 4039

Your top and left values are invalid; they need units attached. Also your z-indexes are flipped; what's on top needs to be a higher value.

#background {
    background-repeat:repeat-x;
    position:relative;
    z-index:1;
}

#overlay {
    position:relative;
    top:-50px;
    left:5px;
    z-index:4;
}​

Upvotes: 2

Related Questions