Непрерывный фоновый рисунок над несколькими элементами

Мне нужно сделать непрерывный фоновый узор над несколькими элементами. Я не могу контролировать высоту элементов или их количество.
Вот пример:

p{
  margin:0;
  padding:1.5em;
}
.bg{
  background-image:url('http://enjoycss.com/webshots/hB_1.png');
}
<p>some text<br>on several lines</p>
<p class="bg">some text<br>on several lines</p>
<p class="bg">some text<br>on several lines<br><br>and another<br>some text<br>on several lines<br><br>and another</p>
<p class="bg">some text<br>on several lines<br><br>and another</p>
<p>some text<br>on several lines<br><br>and another<br>some text<br>on several lines<br><br>and another</p>
<p class="bg">some text<br>on several lines</p>
<p class="bg">some text<br>on several lines<br><br>and another<br>some text<br>on several lines<br><br>and another</p>
<p class="bg">some text<br>on several lines<br><br>and another</p>

Эффект, который я ищу, почти достигнут с background-attachement:fixed; но мне нужен фон для прокрутки контента.
Пример:

p{
  margin:0;
  padding:1.5em;
}
.bg{
  background-image:url('http://enjoycss.com/webshots/hB_1.png');
  background-attachment:fixed;
}
<p>some text<br>on several lines</p>
<p class="bg">some text<br>on several lines</p>
<p class="bg">some text<br>on several lines<br><br>and another<br>some text<br>on several lines<br><br>and another</p>
<p class="bg">some text<br>on several lines<br><br>and another</p>
<p>some text<br>on several lines<br><br>and another<br>some text<br>on several lines<br><br>and another</p>
<p class="bg">some text<br>on several lines</p>
<p class="bg">some text<br>on several lines<br><br>and another<br>some text<br>on several lines<br><br>and another</p>
<p class="bg">some text<br>on several lines<br><br>and another</p>

Источник

3 ответа

Решение

Javascript

Используя небольшое количество JavaScript, вы можете получить нужный эффект.

Этот метод получает текущую высоту и добавляет все предыдущие высоты, чтобы дать элементу начальную фоновую позицию.

var lastHeight = 0;
$('.bg').each(function() {
  $(this).css('background-position', '0 -' + lastHeight + 'px');
  var currentHeight = $(this).outerHeight();
  var newPosition = currentHeight + lastHeight;
  lastHeight = lastHeight + currentHeight;
});
p {
  margin: 0;
  padding: 1.5em;
}
.bg {
  background-image: url('http://enjoycss.com/webshots/hB_1.png');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>some text<br>on several lines</p>
<p class="bg">some text<br>on several lines</p>
<p class="bg">some text<br>on several lines<br><br>and another<br>some text<br>on several lines<br><br>and another</p>
<p class="bg">some text<br>on several lines<br><br>and another</p>
<p>some text<br>on several lines<br><br>and another<br>some 
<p class="bg">some text<br>on several lines</p>
<p class="bg">some text<br>on several lines<br><br>and another<br>some text<br>on several lines<br><br>and another</p>
<p class="bg">some text<br>on several lines<br><br>and another</p>
<p>some text<br>on several lines<br><br>and another<br>some text<br>on several lines<br><br>and another</p>

Источник

Вы можете позволить абзацу min-height/line-height гармонировать с размером фонового изображения:

p {
  margin: 0;
  line-height: 1em;
  background-image: url('http://i.imgur.com/TbQPryV.png');
  background-size: 1em 1em;
  min-height: 1em;
  outline: 1px dashed rgba(0,0,0,0.3);  
}
<p>some text<br>on several lines<br><br>and another</p>
<p>some text<br>on several lines</p>
<p>some text<br>on several lines<br><br>and another<br>some text<br>on several lines<br><br>and another</p>
<p>some text<br>on several lines<br><br>and another</p>
<p>some text<br>on several lines<br><br>and another<br>some text<br>on several lines<br><br>and another</p>

Источник

Я сделал без background:fixed, пожалуйста, проверьте и дайте мне знать, это полезно для вас или нет???

демонстрация

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

Источник
Другие вопросы по тегам