Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using CSS to change span background color has no effect

I have applied background-color: #C0C0C0; to my span element .grey_bg but the background is not changing color. Why is that?

    .grey_bg {

      width: 100%;

      background-color: #C0C0C0;

    }
<span class="grey_bg">
        <h1>Hey</h1>
    </span>
like image 461
John Smith Avatar asked Jun 24 '15 21:06

John Smith


2 Answers

Because it's not really valid HTML to put block-level H1 element inside span (inline element). You can either use div instead of span

.grey_bg {
    width: 100%;
    background-color: #C0C0C0;
}
<div class="grey_bg"> 
    <h1>Hey</h1>
</div>

... or make span block-level too:

span {display: block;}
.grey_bg {
    width: 100%;
    background-color: #C0C0C0;
}
<span class="grey_bg"> 
    <h1>Hey</h1>
</span>
like image 73
dfsq Avatar answered Oct 09 '22 13:10

dfsq


First your markup is not correct. You can't have a block element, h3, inside an inline element, span.

But in case you want to keep that markup, you have to make the container element to behave as block. So make it as:

.grey_bg { 
width: 100%; 
background-color: #C0C0C0; 
display:block;
}
like image 31
Sotiris Avatar answered Oct 09 '22 12:10

Sotiris