How to move header text into banner image?

  • 1
  • Question
  • Updated 6 years ago
I would like to change the margins of either the header or the banner (or both) so the header text shows on the banner image. I am using the Parchment Paper style. I know how to change the CSS but can't seem to figure out how to accomplish this.

Here's what the html looks like now:

<div class="ys_heading">
<h1 style="text-align:left;"><a id="sys_heading" href="./" style="color:#441111;font-size:54px;font-style:normal;font-weight:normal;text-decoration:none;">New SO</a></h1>
</div>

<div class="ys_top"></div>
<div class="ys_middle">
<div class="ys_middle_inner">

<div class="ys_banner_wrap">
<div id="sys_banner">
<div class="ys_banner_over"></div>
</div>
</div>
Photo of Jean

Jean

  • 134 Posts
  • 14 Reply Likes

Posted 6 years ago

  • 1
Photo of Jean

Jean

  • 134 Posts
  • 14 Reply Likes
I should have included the css:

div#sys_banner {
background: url(resources/Photoxpress_1402263_1.jpg.cropped780x145o0%2C-254s782x499.jpg) top left no-repeat;
width:780px;
height:145px;
}

div.ys_heading {
padding:0 0 80px 70px;
}

div.ys_heading h1 {
float:left;
margin:0;
padding:10px 0;
}

div.ys_heading h1 a, div.ys_heading h1 a:hover {
color:#fff;
padding:0 15px;
margin:0;
text-decoration:none;
font-size:35px;
}