Как использовать изображение полной ширины как границу между контентом и нижним колонтитулом

Question

В настоящий момент у меня есть зеленая граница между контентом и нижним колонтитулом. настраивается с помощью настроек тем. Я хочу иметь изображение вместо этого. Должно быть похоже, что трава растет на границе. Проверьте скриншоты! Как мне это сделать? Возможно, CSS? Использование темы Wordpress Jupiter.

Благодаря

С зеленой линии

---

травой как границы

Answer 1

Вы можете использовать background-image свойство с background-repeat.

Посмотрите на ниже фрагменте коде (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>

Надеется, что это помогает!

Answer 2

ах им поздно, но, хотя это может быть полезно

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>