如何使用全宽图像作为内容和页脚之间的边框

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>

如何使用全宽图像作为内容和页脚之间的边框

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

css

php

wordpress

customization