Background-rgba doesn't work on simple snippet?

Have tried this for half an hour now and I still don't get why such a simple snippet won't have background-color:

#section3
z-index: 5;
overflow: hidden;
width: 100%;
height: auto;
background-color: rgba(0, 0, 0, 1);


h3
position: relative;
text-align: center;
margin-top: 10vh;
font-size: 2em;


<span id="section3">
<h3>Unser Anspruch</h3>
</span>

JSFiddle

h3

span

span

inline

block

h3

span

section

1 Answer
1

span is an inline-block element, hence it cannot be given height

span

Inorder to give it height, u will have to convert it into display:block or display:inline block

display:block

display:inline block

But as @LGSon said, h3 must never be put inside a span element

h3

span

Instead of using span, use a div as div is display:block
by default

span

div

div

display:block

#section3
z-index: 5;
overflow: hidden;
width: 100%;
height: auto;
background-color: rgba(250,0,0,1);


h3

position: relative;
text-align: center;
margin-top:10vh;
font-size: 2em;



<div id="section3">

<h3>Unser Anspruch</h3>
</div>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.