CSS背景重复图片保证金顶部

-2

所以我已经知道很多人都问过这个。如这里：CSS背景重复图片保证金顶部

css start repeating background from defined position

我从字面上尝试了所有的这些方法，正确的，而且它不工作。我试图从顶部或“正常”位置开始重复背景100px。

<style> 
.moiraitable{ 
width:500px; 
background-image: url("http://i.imgur.com/owEfTJa.png"); 
background-repeat: repeat-y; 
background-position: center 100px; 
background-size: 510px; 
} 
</style> 
<div class="moiraitable"> 
<img src="http://i.imgur.com/EXYfcOt.png" style="width:500px;margin:0 auto;" /> 
<p style="text-align:justify;margin:10px 40px;color:white;"> 
Proin iaculis pharetra tempus. 
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
Vestibulum tincidunt justo nec orci tempus, quis sagittis lacus eleifend. Praesent id justo eget magna lacinia feugiat. In a risus commodo, consectetur diam id, pellentesque quam. Vivamus accumsan vehicula ligula, in tristique lorem scelerisque sed. Aliquam ante urna, bibendum adipiscing tincidunt eu, posuere non turpis. Vivamus vitae porta urna. Suspendisse consequat nisi semper lectus ullamcorper, et tempus augue convallis. Duis ante lacus, bibendum eget diam at, dignissim blandit dui. Nunc placerat purus vel arcu feugiat, viverra semper velit tristique. Proin magna lectus, bibendum ac lectus at, semper sagittis nunc. Duis ornare quam ac convallis sagittis. Nam convallis quis urna eu vestibulum. Aenean vitae pellentesque quam, non ultricies tortor. 
</p> 
</div>

来源

2014-05-19 user3024230

什么是 “不工作”？ –

我试图完成的是什么-.-“ – user3024230

...那就是？ –

至于什么德里克S说，尝试使用伪元素

尝试。它适用于你的代码。所以，只需改变你的需求。

我会认为这是你在找什么。

使用：

.moiraitable:before { 
    content: ""; 
    background-image: url("http://i.imgur.com/owEfTJa.png"); 
    background-position: center top 100px; 
    background-repeat: repeat; 
    background-size: 100%; 
    position: absolute; 
    top: 100px; 
    width: 500px; 
    height: 100%; 
    z-index: -10; 
}

Demo Fiddle

来源

2014-05-19 20:30:57 RubberPoint

工作好多了，你很多友好的^^ – user3024230

这很好听:)很高兴我可以帮助 – RubberPoint

您提供的示例与您的情况不同，因为您有repeat-y。这会导致背景在两个垂直方向重复，因此背景图像没有“顶部”。我创造了这个简单的演示，你可以检查出：使用伪元素以this answer

来源

2014-05-19 20:12:30

CSS背景重复图片保证金顶部

回答

相关问题