We have 2 solutions here:
Using
display:inline-block
and setwidth:100%
for yourh1
, also use negativemargin-bottom
on theimg
instead:h1 { background: rgba(67,67,67,0.8); display:inline-block; width:100%; } img { margin-bottom:-4em; }
Demo 1.
Using
position:relative
for the img and setz-index:-1
for it:h1 { background: rgba(67,67,67,0.8); } img { margin-bottom:-4em; position:relative; z-index:-1; }
Demo 2.