This is a really common design style, and done right, can look very stylish and professional. The impact of big, bold text over a stunning image really does take your page to the next level, and is a great addition to your website.

Let's take a look at where you might have already got to so far.

    
<div class="cool-image-container">
    <img src="/images/new-york-skyline.jpg" alt="New York Skyline" />
    <h1>New York, New York</h1>
</div>
    

Nothing new here. A simple div containing your image, and the text you want to put on top of that image. Here's how it will currently look, no surprises:

Image and text displayed normally

We've not made any changes just yet, so the page displays exactly as you would expect - the image, followed by the text straight after.

Let's start to move our text into position using CSS.

    
h1{
    position: absolute;
    top: 0;
    left: 0;
}
    

Text positioned absolute

Things are starting to happen. We can see the text has moved as we'd expect, but it's not on top of the image right now. Why is that? Let's look at the description of position absolute from MDN to understand why:

"Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the containing block. Absolutely positioned boxes can have margins, and they do not collapse with any other margins."

So we need to look for our h1's closest positioned ancestor. We haven't set a "position" for our containing div at all, which means it'll keep searching up and up until it finds something that does have a position. In our case, there isn't one so it continues until it reaches the beginning of the document, and has positioned itself relative to the whole page. That's why the text is right at the top, nowhere near our image.

To fix this, we need to give our div a position:

    
.cool-image-container{
    position: relative;
}
    

Position relative added to containing div

Well that's a bit more like it! Because we've given our div a position of relative, it is now used as the reference point to position our h1, without adversely affecting the div itself. The text is above the image, and if we wanted to we could happily stop there and pat ourselves on the back.

But we've come this far, let's style things up a bit more to make it look extra special:

    
h1{
    position: absolute;
    top: 0.25em;
    left: 0.5em;
    text-shadow: 1px 1px 10px #fff;
}
    

Styling given to text above image

The text is now positioned nicely, and we've added some text-shadow to help our text stand out against the image behind.

Another way of doing this that you commonly see used is to give the text it's own transparent background:

    
h1{
    position: absolute;
    top: 0;
    left: 0;
    text-shadow: 1px 1px 10px #fff;
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.25em 0.5em;
    text-align: center;
}
    

Background added to text to make it stand out on top of image

You can see there's lots of ways you can start to get creative with it, and tweak things just as you want them. Hope this helps some of you, if you need to know anything else let me know in the comments below.