CODEWITHSUNDEEP
csstwitter-bootstrapbackground
Matthew Shaw
Matthew Shaw

Reputation: 145

Extending a DIV's background beyond its boundaries

I realize it's pretty common to extend a div's background beyond the width of a containing element, in a navigation bar for instance. So far to achieve this I've used a mixture of padding and margin and it seems to work well enough.

However, I'm trying to extend the background of a div that contains an image:

<div class="row-fluid box">
 <img src="image.jpg"/>
</div>

.box{
background:red;
padding-right:100em;
padding-left:50em;
margin-left:-50em /*The background won't move left without setting the margin like
this for me*/
}

When I do this, the image becomes extremely small (both height and width) to the point of being invisible. This doesn't happen with text which is using the exact same CSS styling.

I'm using bootstrap and giving the div a class of row-fluid (exact same set up that has worked with text containing divs).

Any help would be appreciated!

Upvotes: 1

Views: 8114

Answers (1)

David Taiaroa
David Taiaroa

Reputation: 25485

I find the easiest way to do this is to apply the background to a div which is outside the bootstrap container, something along the lines of this: http://jsfiddle.net/panchroma/qFtNT/ .

It's easy to picture what's happening, it's flexible, and the CSS is much cleaner.

Remember there's nothing to stop you from closing and opening the bootstrap container div any number of times for more complex background layouts.

HTML 

<div class="wideBackground">  

<div class="container">
<div class="row-fluid">
.....
</div> <!-- close row-fluid -->
</div><!-- close container -->

</div><!-- close wideBackground -->

CSS 

 .wideBackground{
 background-color:red;
}

Upvotes: 2

Related Questions