Search code examples
jquerycssbackgroundbackground-position

jQuery Background image position

I'm stuck as to how I can move a background image out of it's container.

I have a container with a 960 width, centered. I then have a banner within the container and I need an image on another layer behind the banner, but with a margin-left: -100px, but with CSS it doesn't work as background images cannot be moved out of their containers. How could I do this with jQuery, or does anyone know a semantically-correct workaround to do it with CSS?

Thanks in advance.

EDIT: http://i49.tinypic.com/s5wzmp.png that's basically how I need it to look, the red is the background image, which needs to "peak" from behind the banner area, both of which are inside the 960px container.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
body { background: #000;padding: 0; margin: 0; }
.home-spot { width: 950px; height: 400px; background: #fff; margin: 0 auto; }
.image { background: url('image.png') no-repeat; height: 200px; width: 100%;  }
.banner { background: #98cb4c; height: 180px; }
</style>
</head>

<body>
    <div class="home-spot">
        <div class="image">
            <div class="banner">
            </div>
        </div>
    </div>
</body>
</html>
Solution

  • I've managed to do it!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
body { background: #000;padding: 0; margin: 0; }
.home-spot { width: 950px; height: 400px; background: #fff; margin: 0 auto; }
.image { background: url('image.png') no-repeat; height: 200px; width: 200px; position: absolute; margin-left: -100px; }
.banner { background: #98cb4c; height: 200px; width: 950px; margin-left: 100px; }
</style>
</head>

<body>
<div class="home-spot">
    <div class="image">
        <div class="banner">

        </div>

    </div>

</div>

</body>
</html>