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

Тема в разделе "Верстка", создана пользователем Extalionez, 5 июн 2013.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. Extalionez

    Extalionez Клоун

    Заблокирован
    Регистр.:
    21 авг 2008
    Сообщения:
    368
    Симпатии:
    185
    Доброго всем времени суток! Подскажите, пожалуйста, ламеру возможно ли растянуть фон за пределы DIV с помощью одного лишь CSS, не перевёрстывая ничего? Спасибо!!! background-position как назло обрезает фон за пределами DIV'а:oops:
     
  2. Sunday

    Sunday

    Регистр.:
    13 дек 2009
    Сообщения:
    724
    Симпатии:
    314
    Если только чистым CSS, то вряд ли, если я правильно понял суть задачи. Как минимум придется добавить еще один DIV, в него подложить этот фон и подсунуть под меньший DIV.
    Показали бы кусок кода, было бы проще придумать.
     
    Extalionez и Шумадан нравится это.
  3. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.722
    Симпатии:
    2.097
    нельзя, можно только использовав контейнер уровнем выше, вот именно в нём устанавливать фон, а внутренний контейнер делать прозрачным или там каким нужно.

    один из примеров
    http://jsfiddle.net/hobobne/bFBfh/3/

    и один из возможных вариантов
     
    Sunday и Extalionez нравится это.
  4. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.126
    Симпатии:
    668
    Extalionez и Sunday нравится это.
  5. exceptionnel02

    exceptionnel02 Писатель

    Регистр.:
    23 апр 2012
    Сообщения:
    4
    Симпатии:
    1
    Точно нельзя. Единственный вариант - внутренний блок бОльшего размера. Но вообще - делать так плохо. Можете менять размер блока через яваскрипт - переверстывать не придется
     
  6. etosh

    etosh Создатель

    Регистр.:
    22 июл 2013
    Сообщения:
    32
    Симпатии:
    4
    Я вот так делал, с :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;
    }
     
  7. etosh

    etosh Создатель

    Регистр.:
    22 июл 2013
    Сообщения:
    32
    Симпатии:
    4
    Куда уж проще то? И что значит "ещё один див", больше по размерам чтоли? Это далеко не лучшее решение.
    Вот взял из реально проекта пример, см. мой пост выше.

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

    [​IMG]
    [​IMG]