Issue
How would I go about and get text to overlay on top of an image in dreamweaver? Like the linked image below: http://i.stack.imgur.com/8GvkW.png
Here is what my code looks like:
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;
}
Solution
You'll want to set your image as a background image in your CSS.
First put your text inside the <header> tag and remove the image, like so:
<header>
<h1>Hidden Gems of</h1>
<h2>Canada</h2>
</header>
Then in your CSS add the header image as a background:
header{
width: 1280px;
height: 500px;
background:url('images/headerimage.jpg') no-repeat center;
/* 'no-repeat' stops the image tiling inside its container, and 'center' will position the image in the middle of its containing div */
margin-top: 23px;
}
Answered By - dave Answer Checked By - Timothy Miller (PHPFixing Admin)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.