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

此刻，我在内容和页脚之间有一条绿色边框线。通过主题设置配置。我想要有一个图像。应该看起来像边界线上生长的草。检查屏幕截图！我怎么做？ CSS可能？使用WordPress的木星主题。如何使用全宽图像作为内容和页脚之间的边界

感谢

随着绿线 green line

用草边境

with grass as border

来源

2016-11-29 Patrick

'边境image' *可以*是服务。或'background-position：bottom center;' – Roberrrt

可以使用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>

希望这有助于！

来源

2016-11-29 15:08:38

看起来可以工作。谢谢 – Patrick

@Patrick这是我的荣幸！ –

Saurav，我已经实现了，它在一些页面上的工作很好，但并不是全部。我有一个全球背景图片。尽管分隔图像具有透明背景，但有时会使其变为白色，有时不会。查看第一个链接在哪里工作，第二个链接在哪里没有。 https://test.storl.de/veranstaltungen/ https://test.storl.de/kontakt/ 任何想法？ – Patrick

啊IM晚，但尽管它可能是有用的

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>

来源

2016-11-29 15:22:07 Rahul

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

回答

相关问题