Расширение div за пределами размера экрана

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

<html> 
    <body> 
     <div class="paragraph"> 
      <p>text!</p> 
     </div 
</html>

CSS

html { 
    background:    url('/images/bg.png'); 
    margin:     0; 
    padding:    0; 
    height:     100%; 
    min-height:    100%; 
} 

body { 
    margin:     0; 
    padding:    0 0 50px 0; 
    background-image:  url('../images/fullheader.gif'); 
    background-position: center 20px; 
    background-repeat:  no-repeat; 
    position:    absolute; 
    top:     0px; 
    bottom:     0px; 
    right:     0px; 
    left:     0px; 
    min-height:    100%; 
} 

.paragraph { 
    width:     640px; 
    padding:    10px 20px; 
    margin:     400px auto 0 auto; 
    min-height:    100%; 
}

я могу отправить снимок экрана, если это помогает.

источник

2013-04-24 user1809388

Создайте [Fiddle] (http://jsfiddle.net) своей проблемы. –

показать мне скрипку или скриншот? –

почему бы вам не попробовать полное фоновое изображение страницы здесь refrence http://css-tricks.com/perfect-full-page-background-image/ –

добавить CSS к телу как этот

 body { 
      background:#fff url(background.jpg) repeat-y top center; 
      margin:0px; 
      padding:0px; 
      }

источник

2013-04-24 12:01:52

Извините, я должен был добавить, что вертикальное повторение не является вариантом. – user1809388

Если вертикальный повтор не вариант, и ваш Б.Г. изображение, конечно, не может быть бесконечным, я думаю, что единственный способ не отрезать изображение после того, как некоторые скроллинг фиксации это положение:

body { 
    background-attachment: fixed; 
}

нет, может быть другое решение, но в большинстве случаев это не будет выглядеть очень хорошо: Установите background-size, например:

body { 
    background-size: contain; 
}

источник

2013-04-24 12:14:50

Это заставляет фоновое изображение исчезать при прокрутке вниз, но спасибо. Мне действительно нужен способ сделать видимым переполнение или расширить div, чтобы включить этот абзац. – user1809388

@ user1809388, создайте http://jsfiddle.net своей проблемы. –

Если ваша цель держать фон с высотой достаточно, чтобы покрыть размер ваших пунктов и с ограничением не повторять и не искажают аспект радио есть простое и чистое решение Расположить фон в тег тела. Установите его размер в авто для горизонтального размера и 100% для высоты абзаца, в настоящее время содержатся в организме будет толкать высоту тела, и это будет толкать фон высоту без искажения соотношения сторон

body { 
    width:100%; <!-- or what ever.....--> 
    background:url("whatever.jpg") no-repeat; 
    background-size:auto 100%; 
}

Вот вам fiddle. Я использовал изображение википедии. Поиграйте с ним, изменив количество абзацев и т. Д. Надеюсь, это поможет.

источник

2013-04-24 12:32:35 Fico

Спасибо, проблема в том, что это сильно изменяет размер изображения, так что он не выходит за пределы размера экрана, но я сейчас играю с ним, чтобы увидеть, можно ли увидеть переполнение, когда оно больше. – user1809388

Расширение div за пределами размера экрана

ответ

Смежные вопросы