Расширение фона DIV за его пределами

Question

Я понимаю, что довольно распространено расширение фона div за пределы ширины содержащего элемента, например, в панели навигации. До сих пор для достижения этой цели я использовал смесь прокладки и разметки, и, похоже, она работает достаточно хорошо.

Однако я пытаюсь расширить предысторию в DIV, который содержит изображение:

<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*/ 
} 

Когда я делаю это, то изображение становится крайне мала (как высота и ширина) до точки бытия невидимый. Это не происходит с текстом, который использует тот же стиль CSS.

Я использую bootstrap и даю div класс строки-жидкости (точно такой же набор, который работал с текстом, содержащим div).

Любая помощь будет оценена!

Answer 1

Я нахожу, что самый простой способ сделать это - применить фон к div, который находится вне контейнера начальной загрузки, что-то вроде строк: http://jsfiddle.net/panchroma/qFtNT/.

Легко представить, что происходит, оно гибкое, а CSS намного чище.

Помните, что вам нечего мешать закрывать и открывать контейнер контейнера bootstrap любое количество раз для более сложных фоновых макетов.

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