jQuery Background image position

Question

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>

There isn't much to see, I'm just messing around with blocks of colour atm to try and get it to work.. — Karl, Feb 07 '13 at 15:45
Ohhhhhh..... I think I finally see what you want now.... Position your image (whatever the red block is) as `absolute` with and `left: -100px` Make sure it's parent, the wrapper, is positioned as at least `relative` — Leeish, Feb 07 '13 at 15:55
I've tried position absolute too, but it just ruined the banners position too. Since it's inside the image div. Any ideas? — Karl, Feb 07 '13 at 15:57
If the block of content above the banner has a fixed height you can put your background image on the body element. — Tom, Feb 07 '13 at 15:58
The body already has a background on the template which I'm working with unfortunately. — Karl, Feb 07 '13 at 15:59
I've edited my answer. I think my Fiddle does what you want. The orange banner is the full width of the wrapper but the green block peaks out to the left of the banner, outside the wrapper area. — Leeish, Feb 07 '13 at 16:04
Depending on what browsers you need to support, you can do multiple background images. http://www.css3.info/preview/multiple-backgrounds — Tom, Feb 07 '13 at 16:24

score 1 · Accepted Answer · answered Feb 07 '13 at 16:02

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>

Leeish · Answer 2 · 2013-02-07T16:03:55.307

0

Why not just remove the background image so you can see through the element to what is behind it. If you are doing it via javascript, there is little difference between moving it out of view and just removing it.

EDIT

I think I understand now. Your red image block needs to be positioned as absolute and set the left value to -100px or whatever. It will then float outside it's first parent block with a defined position other than static.

This is what you want I think:

http://jsfiddle.net/UF3nd/

<div id="main">
    <div id="wrap">
        <div id="banner">
            <div id="peak">
                I'm in back
            </div>
            I'm in front
        </div>
    </div>
</div>

#banner {
    background: orange;
    position: relative;
    width: 100%;
    height: 50px;
}
#peak {
    background: green;
    width: 50px;
    height: 50px;
    position: absolute;
    left: -50px;
}

edited Feb 07 '13 at 16:03

answered Feb 07 '13 at 15:37

Leeish

5,203
2
17
45

The background image needs to be outside of the 960px container, for larger monitors. So it won't be out of view.. – Karl Feb 07 '13 at 15:40
Right, but if your reasoning behind moving it, is to hide it, just set the background-image property to none rather than changing it's location. – Leeish Feb 07 '13 at 15:41
Where are you getting the impression I want to HIDE something from? – Karl Feb 07 '13 at 15:44
`I need an image on another layer behind the banner` My thinking is, you want to show the image `behind` the banner. But your lack of code doesn't help anyone solve your issue. Also confusing, there are no layers in HTML. I guess z-index is a layer, which might also solve your issue. – Leeish Feb 07 '13 at 15:46
I've already tried using a negative background position, which yes, moves it. But if you have an image 200 by 200 and you offset it by 100 to the left, then you lose 100px of the image because of the container that it's in. – Karl Feb 07 '13 at 15:54
Thanks for your suggestions `Leeish`, I've managed to figure it out, see my answer below. – Karl Feb 07 '13 at 16:03

score 0 · Answer 3 · answered Feb 07 '13 at 15:51

Here's one way that you can do what you're trying to do:

http://jsfiddle.net/BuAQC/1/

The HTML:

<div class="full-width">
    <div class="width-960">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at convallis urna. Proin id pharetra erat. Etiam fringilla sem sed leo ullamcorper sed ornare odio porttitor. Nulla ullamcorper, diam at fermentum egestas, enim nisl dapibus turpis, a sodales leo enim consequat augue. Praesent vel dapibus mauris. Fusce ut sem quis dolor condimentum accumsan in eget ipsum. Curabitur placerat molestie justo, sit amet viverra lectus euismod id. Etiam leo elit, iaculis sit amet imperdiet consectetur, mollis vitae metus. Aliquam sodales adipiscing tortor, sed venenatis velit ullamcorper non. Morbi accumsan posuere quam non dictum. Cras libero leo, adipiscing non convallis vitae, eleifend ut odio. Praesent convallis lectus sollicitudin risus dapibus laoreet.</p>
    </div>
</div>

The CSS:

.full-width {
    background-color: #333;
}

.width-960 {
    background: #dcdcdc;
    width: 920px;
    padding: 20px;
    margin: 0 auto;
}

The code I've posted would allow you to have a background behind your 960 element which stretches beyond the 960 width. Apologies if it doesnt help or I've misunderstood your question. Only trying to help :) — Billy Moat, Feb 07 '13 at 16:07
I think you misunderstood my question, I solved it anyway but thanks for trying. — Karl, Feb 07 '13 at 16:26

jQuery Background image position

3 Answers3