CSS Background Image Layers

HTML & CSS
1

Is it possible to place a CSS background image in front of your content using the Z-index. I’ve tried this but cant get it to work.

I’m attaching a png background image to a wrapper, fixing it to the bottom of the screen, but can only get it set as a background, I’d like to get the content to disappear behind it if possible.

Anyone done this before?

2

Hi,

You can’t have the foreground content of an element go behind its own background.

You could place a nested element behind its non positioned parent.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.outer {
    width:200px;
    height:200px;
    background:url(img.gif) no-repeat 0 100&#37;;
    border:1px solid #000;
}
.inner {
    position:relative;
    z-index:-1;
    width:200px;
}
</style>
</head>
<body>
<div class="outer">
    <div class="inner">
        <p>Inner content goes here - inner content goes here Inner content goes here - inner content goes here Inner content goes here - inner content goes here </p>
    </div>
</div>
</body>
</html>