How can I get an h1 element to display over an image? - html

Question

I want to display my page's title, "Math Achievement Tutoring", over a photograph of a hiker. My first attempt was to create this html:
<div id="wrapper">
<header>
<h1>Math Achivement Tutoring</h1>
</header>
<div id="hero">
<img src="http://michaelmossey.com/demo/home-hiker-grayish.jpg" alt="" width="500">
</div>
</div>
with this CSS, the idea being to position the h1 as absolute:
h1 {
text-align:center;
position: absolute;
color: #a04040;
}
but this means the title is no longer centered. I may run into other trouble as well if I start to fiddle with margin and padding.
h1 {
text-align:center;
position: absolute;
color: #a04040;
}
<div id="wrapper">
<header>
<h1>Math Achivement Tutoring</h1>
</header>
<div id="hero">
<img src="http://michaelmossey.com/demo/home-hiker-grayish.jpg" alt="" width="500">
</div>
</div>
What are my options for achieving this, and does it depend on where I want to take this website eventually? (like adding a navigation menu below the image)? Is there any simple demonstration code?

Answer 1

First, add position relative to #wrapper, then :
if you want it to be vertically & horizontally centered
h1 {
text-align:center;
position: absolute;
color: #a04040;
left: 50%;
top: 50%;
transform: translate( -50%, -50% );
}
if you want it to be vertically centered
h1 {
text-align:center;
position: absolute;
color: #a04040;
top: 50%;
transform: translateY( -50% );
}
if you want it to be horizontally centered
h1 {
text-align:center;
position: absolute;
color: #a04040;
left: 50%;
transform: translateX( -50% );
}

Answer 2

Just as Loesh Gupta says: make the wrapper .wrapper { position: relative; }. To center the text you can use multiple options. I'd go with something like this:
h1 { position: absolute; left: 50%; right: 50%; transform: translate(-50%, -50%); }
I can also recommend this tool: http://howtocenterincss.com/

Answer 3

Here's a solution using flexbox:
#wrapper {
display: flex; /* establish flex container */
flex-direction: column; /* stack flex items vertically */
position: relative; /* establish neares positioned ancenstor for absolute positioning */
}
h1 {
color: red;
}
.text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: bold;
}
.center-aligned {
display: flex;
align-items: center;
justify-content: center;
}
<div id="wrapper" class="center-aligned">
<img class="background-image" src="http://michaelmossey.com/demo/home-hiker-grayish.jpg" />
<div class="text"><h1>Math Achivement Tutoring<h1></div>
</div>

Answer 4

Using a background image on a div and a display flex on the text might do it. Make sure to add the height on the text based on the image so it can be centered.
*{margin: 0 auto;}
.bg{
background-image:url('http://michaelmossey.com/demo/home-hiker-grayish.jpg');
height: 380px;
background-repeat: no-repeat;
background-size:cover;
background-position: center center;
}
.bg h1{
display: flex;
justify-content: center;
align-items: center;
height: 380px;
font-size: 3em;
color: #ffffff;
background-color: rgba(0,0,0,0.5);
}
<div class="bg">
<h1>Math Achivement Tutoring</h1>
</div>