Patrick Patrick - 11 days ago 6
PHP Question

How to use a full width image as border between content and footer

at the moment I have a green border line between content and footer. configured through theme settings. I want to have an image instead. Should look like grass growing on the border line. Check screenshots! How do I do that? CSS maybe? Using Wordpress Jupiter theme.

Thanks

With green line
green line




With grass as border

with grass as border

Answer

You can use background-image property with background-repeat.

Have a look at the snippet below (wait for the image to load):

.divider {
  height: 5px;
  margin: 10px 0;
  background-image: url('http://lorempixel.com/200/3/');
  background-repeat: repeat-x;
}
<div class="top">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae obcaecati assumenda provident molestias fugit aperiam, at cumque voluptate tenetur, ab ratione magnam ipsa in aspernatur ipsum, error modi iste harum.</div>

<div class="divider"></div>

<div class="bottom">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet quidem eius deserunt aut suscipit blanditiis omnis a alias dolorem consequatur mollitia molestias architecto consequuntur asperiores minima sapiente laudantium, quisquam saepe.</div>

Hope this helps!