CODEWITHSUNDEEP
javascriptjquerycssbackgroundbackground-image
web-tiki
web-tiki

Reputation: 103780

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>

Upvotes: 3

Views: 147

Answers (3)

L777
L777

Reputation: 8457

You can let the paragraph min-height/line-height in harmony with the background-image size:

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>

Upvotes: 3

Stewartside
Stewartside

Reputation: 20905

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>

Upvotes: 4

Sunil Gehlot
Sunil Gehlot

Reputation: 1589

I have done with without background:fixed. please check and let me know its useful for you or not???

Demo

If m not get any point of yours then let me know.

Upvotes: 0

Related Questions