What steps should I take to overlay text on an image using Dreamweaver? Similar to the example linked below: https://i.stack.imgur.com/8GvkW.png
Below is a snippet of my code:
HTML
<body>
<main>
<header>
<img src="images/headerimage.jpg" alt="" height="500" width="1280">
</header>
<h1>Hidden Gems of</h1>
<h2>Canada</h2>
</main>
</body>
CSS
body{
margin:0;
}
main{
width: 1280px;
margin: 0 auto;
background-color: #FFF;
}
header{
height: 500px;
background-color: #FF751F;
margin-top: 23px;
}
h1{
font-family: "Ailerons";
font-size: 83px;
font-weight:lighter;
text-shadow: 7px 7px 15px #000;
color: #FFF;
float: left;
margin-top: -300px;
margin-left: 314px;
}
h2{
font-family: "SkolaSans";
font-size: 44px;
font-weight:100;
text-shadow: 7px 7px 10px #000;
color: #FFF;
float: left;
margin-top: -200px;
margin-left: 536px;
padding-top: 15px;
}