How to add title to header image (not slider)

Hi all,

I have a homepage image header with a single image (not a slider). Is it possible to add a title to this? If so, how?

My page is http://www.haydensmithtutoring.com/

Thanks

Hi,

There is no option to add title to the header image, but can try this trick:

  1. Install and activate Header and Footer plugin
  2. Go to settings > Header and Footer > add this code below to “Before body closing tag (footer)”
<script>
jQuery(function(){
   var headerTitle = 'YOUR HEADER TITLE';
   var fontColor = 'white';
   var fontSize = '50';
   jQuery('.header-image').append('<div style="top: 50%; width: 100%; text-align:center;color: '+fontColor+';font-size:'+fontSize+'position: relative;">'+headerTitle+'</div>');
})
</script>

Regards,
Awan

Hi Awan,

Thanks for your reply.

I followed your directions. The title is tiny (barely visible) and at the very top of the image (above the menu and logo.

How do I:

  1. Make it brighter (is the image overly causing a problem?)
  2. Make it bigger (the font size is 50 but it’s tiny)
  3. Move it down a bit

Thanks

Hi,

I am sorry, missed a semi-colon on the code in above, please replace the code with this:

<script>
jQuery(function(){
   var headerTitle = 'YOUR HEADER TITLE';
   var fontColor = 'white';
   var fontSize = '50';
   jQuery('.header-image').append('<div style="top: 50%; width: 100%; text-align:center; color: '+fontColor+'; font-size:'+fontSize+'px; position: relative;">'+headerTitle+'</div>');
})
</script>

Thankyou very much Awan. I have updated this and now it looks just how I want it.

Just 1 more question though if I may. When the screen size is reduced, the title drops below the header image. This is fine, but the background color behind the title text is grey which doesn’t look too great. How do I change this background color to say, black? I tried adding a background color element to the JQuery, and whilst it worked, it made the background color black even when the text was located over the header image, which was not ideal. I only want the background color to go black when the text is below the image (only on small screens).

Cheers.

Oh I see… But you will need to make a bit change again to the code in above. You have to add an ID to the container of the text. Please replace this line:

jQuery('.header-image').append('<div style="top: 50%; width: 100%; text-align:center; color: '+fontColor+'; font-size:'+fontSize+'px; position: relative;">'+headerTitle+'</div>');
})

with this:

jQuery('.header-image').append('<div id="custom-header-text" style="top: 50%; width: 100%; text-align:center; color: '+fontColor+'; font-size:'+fontSize+'px; position: relative;">'+headerTitle+'</div>');
})

Then, go to customize > additional CSS and add this CSS code:

@media only screen and (max-width: 1024px){
    #custom-header-text{
        background-color: black;
    }
}

Thanks Awan, solved all my problems.

Much appreciated.

Happy to help :slight_smile: