.main-column h2 {
padding-top: 110px;
padding-bottom: 110px;
background: url('someimagehere.png') no-repeat center top;
margin: 0 auto;
position: relative; /*so that the image stays on top.*/
}
.text-column {
width: 215px;
background-color: yellow;
margin-top: -120px; /*so that it enters inside the h2*/
padding-top: 120px;
margin-left: auto;
margin-right: auto;
}
<div class="main-column">
<h2>Hello tittle 1</h2>
<div class="text-column">
<p>I'm on column 1 and I like it</p>
<p>I'm on column 1 as well</p>
</div>
</div>
This works, but I don't get it.
Why does given "position: relative" to the h2, will place the background image there visible, on top of the other element yellow background color?
Again, this code works. I'm just asking for help on understanding the behavior.
Please advice