DIV1有背景图像，必须显示完全覆盖前面带有DIV2的DIV2 [英] DIV1 has background-image and has to show to completely cover DIV2 with DIV2 in front

问题描述

I created a DIV1 and inside that DIV1 I only want an image. DIV1 with the image is the background (background-image) to another DIV2 with text list content.

I manage to have DIV1 cover the DIV2 content nicely and also show the background-colour, but I cannot replace the background-colour with an image of my choosing. Nothing happens then. What I do wrong?

#backimage {
width: 100px;
height: 100px;
background: url('../images/pic.jpeg');
background-repeat: repeat;
background-position: center center;
display: inline;
overflow: hidden;
margin: 0 auto;
border-radius: 5%;
-moz-border-radius: 5%;
-webkit-border-radius: 5%;
background-color: #F7FAD2;
float: left;
}

And my HTML:

<div id="backimage">
<div class="menu1">
<p>step1</p>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
<div class="menu2">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</div>
<div class="menu3">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</div>

As said, I get the background colour to show, but NOT the background image (and I did verify the path). Why this doesnt work?

推荐答案

永远不要使用相对路径。你用过chrome来看看发生了什么吗？ chrome调试器将显示正在使用的CSS规则，显示图像是否在预期的位置等等。

Never use relative paths. Have you used chrome to see what's going on ? The chrome debugger will show you the CSS rules being used, show you if the image is not where expected, etc.

这篇关于DIV1有背景图像，必须显示完全覆盖前面带有DIV2的DIV2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！