CODEWITHSUNDEEP
phpcsswordpresscustomization
Patrick
Patrick

Reputation: 3

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

Upvotes: 0

Views: 555

Answers (2)

Rahul
Rahul

Reputation: 4374

ah im late, but though it might be useful

footer, header{
  width: 100%;
  height: 200px;
  background-color: black;
  color: #fff;
}
.divider{
  height: 200px;
  background: url(http://wiltdasney.applicationcraft.com/service/Resources/fbb6ab3d-4f74-49c9-84ab-0395c41d42d8.png) center bottom repeat;
}
<header>

content

</header>

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

<footer>
footer

</footer>

Upvotes: 0

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

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!

Upvotes: 1

Related Questions