web-tiki web-tiki - 1 month ago 5
jQuery Question

Continuous background-image pattern over several elements

I need to make a continous background pattern over several elements.
I can't control the height of the elements or their number.

Here is an example:



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>





The effect I am looking for is almost achieved with
background-attachement:fixed;
but I need the background to scroll with the content.

Example:



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>




Answer

Javascript

Using a small amount of JavaScript, you can get the effect you require.

This method gets the current height and adds all the previous heights to give the element its starting background position.

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>

Comments