Растянуть background за пределы DIV

[Extalionez]

Доброго всем времени суток! Подскажите, пожалуйста, ламеру возможно ли растянуть фон за пределы DIV с помощью одного лишь CSS, не перевёрстывая ничего? Спасибо!!! background-position как назло обрезает фон за пределами DIV'а

 

[Sunday]

Если только чистым CSS, то вряд ли, если я правильно понял суть задачи. Как минимум придется добавить еще один DIV, в него подложить этот фон и подсунуть под меньший DIV.
Показали бы кусок кода, было бы проще придумать.

 

[Шумадан]

Доброго всем времени суток! Подскажите, пожалуйста, ламеру возможно ли растянуть фон за пределы DIV с помощью одного лишь CSS, не перевёрстывая ничего? Спасибо!!! background-position как назло обрезает фон за пределами DIV'а

нельзя, можно только использовав контейнер уровнем выше, вот именно в нём устанавливать фон, а внутренний контейнер делать прозрачным или там каким нужно.

один из примеров
Для просмотра ссылки Войди или Зарегистрируйся

и один из возможных вариантов

You cannot do that whith background, but you can use a html image with position:relative or absolute with a negative left.

 

[mdss]

Используй псевдоэлементы
Для просмотра ссылки Войди или Зарегистрируйся

 

[exceptionnel02]

Точно нельзя. Единственный вариант - внутренний блок бОльшего размера. Но вообще - делать так плохо. Можете менять размер блока через яваскрипт - переверстывать не придется

 

[etosh]

Я вот так делал, с :before. Собственно, изобретение не моё, найдено в буржунете.

HTML:

<!-- start menu -->
<div id="menu" class="withOverflowingBackground">
  <div id="nav-left"> … </div>
  <div id="nav-company" class="active"> … </div>
  <div id="nav-business"> … </div>
  <div id="nav-it"> … </div>
  <div id="nav-virtual"> … </div>
  <div id="nav-multimedia"> … </div>
  <div id="nav-practicum"> … </div>
</div>
<!-- end menu -->

CSS:

.withOverflowingBackground {
  position: relative;
  background-color: transparent;
}
.withOverflowingBackground:before {
  content: " ";
  position: absolute;
  top: 0;
  left: -69px;
  width: 1029px;
  height: 18px;
  z-index: -1;
  background: url(../images/page-top.png) top center no-repeat;
}

 

[etosh]

Сделайте просто ещё один див так будет проще

Куда уж проще то? И что значит "ещё один див", больше по размерам чтоли? Это далеко не лучшее решение.
Вот взял из реально проекта пример, см. мой пост выше.

Картинка 1 - как оно выглядит в реале. Картинка 2 - доказательство ширины дива.