Overflow Background Image Outside Div

Get Started
1

I’m trying to get a background image to flow outside of it’s parent div boundaries. Here’s what I’ve tried so far:

  1. Overflow:visible
  2. Padding right and left.
  3. z-index

None of these have worked. Does anyone know what I’m missing?

It’s the #blog-banner that I’m trying to get the background image to flow outside of the parent div boundaries.

A little code to wet your whistle:


<div id="wrapper">
<div id="main">
....content stuff
<div class="leaderboard">
...content stuff
<div id="blog-banner" ></div>
</div>
</div>
</div>



#wrapper{
width:960px;
margin:10px auto 0;}

#main{
clear:both;
overflow:hidden;}

.leaderboard{
margin-bottom:20px;
border-bottom:1px solid #e3e3e3;
padding:10px 0 30px;
position:relative;}

#blog-banner {
width:1000px;
height:100px;
background:url(images/blog-banner.png) 
no-repeat;
position:absolute;
left:-50px;
top:110px;
padding:0 50px;}
2

Move your #blog_banner div completely outside of the nested divs.

.

3

Thanks for the reply John!

But if I place the #blog-banner div outside of the nested divs, then there’s a problem with the it’s position. The background image will shift when the screen is resized. I needed to use a parent div set to position:relative; with the #blog-banner set to position:absolute; in order to get it to be consistently placed across screen sizes, right?

With #blog-banner outside of any parent div’s, position is out of whack.

4

I think I got it figured out, thanks to John…

I moved the #blog-banner to below the #wrapper. Added relative positioning to #wrapper and absolute position to #blog-banner. Then it was simply a matter of adjusting the top and left placement. :slight_smile:

Here’s the code to:



<div id="wrapper">
<div id="blog-banner" ></div> <!-- moved -->
<div id="main">
....content stuff
<div class="leaderboard">
...content stuff
</div>
</div>
</div>


#wrapper{
width:960px;
margin:10px auto 0;
position:relative;}

#main{
clear:both;
overflow:hidden;}

.leaderboard{
margin-bottom:20px;
border-bottom:1px solid #e3e3e3;
padding:10px 0 30px;
position:relative;}

#blog-banner {
width:1000px;
height:100px;
background:url(images/blog-banner.png)
no-repeat;
position:absolute;
left:-20px;
top:700px;}
5

Check out http://w3schools.com


Property Values

Value	Description
absolute	
   Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static. The element's position is specified with the "left", "top", "right", and "bottom" properties

fixed
 	Generates an absolutely positioned element, positioned relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties

relative
	Generates a relatively positioned element, positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position

static	
    Default. No position, the element occurs in the normal flow (ignores any top, bottom, left, right, or z-index declarations)

inherit
	Specifies that the value of the position property should be inherited from the parent element

.

6

Yeah, I got it. Thanks!