如何让我的背景颜色覆盖我的整个DIV不仅仅是在它的文本？

Question

I have a DIV that contains image and text ...

<div id="control" class="btn">

<div id="btn_container"><img width="100" height="100" src="https://cdn3.iconfinder.com/data/icons/minecraft-icons/512/Stone_Pickaxe.png" alt="Mining pick" /></div>

<span>Start</span> 

</div>

I would like to have a background color in my DIV, so I did this

.btn
{
    position: relative;
    margin-bottom:20px;
    padding: 0 10px;
    text-align: left;
    font-size: 16px;
    color: #333;
    background:gray;
    display: inline-block;
}

but the background color is only appearing on my image and not in the DIV -- https://jsfiddle.net/xwdnvcy5/17/ . How do I make the background color appear in the entirety of the DIV? I would prefer not to hard-code a height and width in my DIV as I plan to use this class for other elements.

Answer 1

The issue is with the absolutely positioned img, I've modified the link. If you want to move around the elements make the text span relative. https://jsfiddle.net/sandeepcnath/xwdnvcy5/19/

The reason for your issue is that absolutely positioned elements don't take up space in the layout. Only the text span was getting bg-color because it was the only element inside .btn occupying space.

.btn
{
    position: relative;
    margin-bottom:20px;
    padding: 0 10px;
    text-align: left;
    font-size: 16px;
    color: #333;
    background:gray;
    border-radius:5px;
    display: inline-block;
    text-align: center;
}

#btn_container
{
}

.btn img
{

}


.btn span
{
    display:-block;
    vertical-align:middle;
}

Answer 2

The problem is that your div#btn_container don't have any size because the <img> inside has an absolute positioning

position: absolute

The element is removed from the normal document flow; no space is created for the element in the page layout...

Read more about position on MDN .

One possible solution is removing the .btn img position property. In this scenario it will set to static by default (Keep in mind that top , right , bottom , left , and z-index properties have no effect when position: static and that's why I comment those in the code snippet bellow. I also removed the margins to keep the image inside the container <div> ):

 .btn { position: relative; margin-bottom:20px; padding: 0 10px; text-align: left; font-size: 16px; color: #333; background:gray; display: inline-block; } #btn_container { border-radius:5px; background:red; position: relative; } .btn img { /* static psoitioning don't care about position props like: left: 50%; top: 50%;*/ /* remove margins to keep image inside the container div margin-left: -15px; margin-top: -15px;*/ /*position: absolute;*/ /* line removed */ } .btn span { display:inline-block; vertical-align:middle; } 

 <div id="control" class="btn"> <div id="btn_container"> <img width="100" height="100" src="https://cdn3.iconfinder.com/data/icons/minecraft-icons/512/Stone_Pickaxe.png" alt="Mining pick" /> </div> <span>Start</span> </div> 

Answer 3

Remove display: inline-block; .

Answer 4

如果您摆脱了这个位置：.btn img上的绝对位置将有所帮助-我只是试着看看。