How Do I place headline text behind another headline? (See image) - html

Question

I would like to have headline text, similar to the way it is the image below, behind my headline text.
https://www.dropbox.com/s/f66x0txr37klbe0/example.png?dl=0
I thought potentially using a relative position on the first header would allow it but I don't see to be doing that correctly as nothing is appearing.
Can someone please help me with the code to achieve this effect?

Answer 1

Here is a working example using css an no z-index. Using the element creation order you can select which one is on top.
https://jsfiddle.net/s2aqxfr9/
<div>
<h1 class="h1-back">
World!
</h1>
<h1 class="h1-front">
Hello!
</h1>
</div>
Here is your CSS
div {
display:inline-block;
}
.h1-back {
position:absolute;
top:0;
left:0;
color:red;
opacity:0.5;
transform: rotate(-20deg);
}
.h1-front {
position:absolute;
top:0;
left:0;
color:blue;
}

Answer 2

way 1
<div class="main">
<img src="img.jpg">
<h1>Title</h1>
</div>
.main{
position:relative
}
.main img{
position:absolute;
z-index:1;
}
.main h1{
position:absolute;
z-index:2;
}
way 2:
<div class="main">
<h1>Title</h1>
</div>
.main{
background-image:url('path/to/img.jpg');
background-position:center;
background-repeat:no-repeat;
}

Answer 3

You have to position the second heading (or any other element) absolutely.
Positionthe top left corner in the middle, then fix the position with transform: translate():
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -40%) rotate(-12deg);
Don't forget that the element needs a parent with position: relative as a reference point.
.hero-section {
position:relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 20vh;
background-color: rgba(0,0,0,0.1);
margin: 0 0 2rem 0;
padding: 1rem;
}
.another-hero-section {
position:relative
background-color: rgba(0,0,0,0.1);
margin: 0 0 1rem 0;
padding: 1rem;
}
.special-heading {
font-family: 'Amatic SC', cursive;
font-size: 5rem;
position: relative;
line-height: 1;
color: #333;
margin: 0;
}
.special-heading span {
font-family: 'Caveat Brush', cursive;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -40%) rotate(-12deg);
color: #127b9b;
text-shadow: 10px 12px 11px #000000cf;
font-size: 6rem;
}
.special-heading-foreground {
font-family: 'Caveat Brush', cursive;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(12deg);
color: #749b12;
text-shadow: 10px 12px 11px #000000cf;
font-size: 6rem;
margin: 0;
line-height 1;
}
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Caveat+Brush" rel="stylesheet">
<section class="hero-section">
<h1 class="special-heading">Well, interesting background <span>Foreground</span></h1>
</section>
<section class="hero-section">
<h1 class="special-heading">Another background</h1>
<h2 class="special-heading-foreground">Heading 2</h2>
</section>