CODEWITHSUNDEEP
jquerycssbackgroundbackground-position
Karl
Karl

Reputation: 5473

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>

Upvotes: 0

Views: 612

Answers (3)

Leeish
Leeish

Reputation: 5213

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;
}

Upvotes: 0

Karl
Karl

Reputation: 5473

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>

Upvotes: 1

Billy Moat
Billy Moat

Reputation: 21050

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;
}

Upvotes: 0

Related Questions