Header title on the header image

I would like to have different header image for various service section of my website. I would like the header title to be displayed on the header image.

Please can someone suggest of a css code to customise it.

Hello there,

Please follow the short tutorial posted at this thread.

To display the title on the header image, please try to do the following steps:

  1. Install and activate the Header and Footer Scripts plugin. Go to Settings > Header and Footer Scripts.

  2. Paste the following to the “Scripts in header:” box


<style>
.header-image-title {
  color: #fff;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 2;
  width: 100%;
  min-height: 260px;
  padding-top: 5px;
  top: 50%;
  -webkit-transform: translateY(-10%);
  -moz-transform: translateY(-10%);
  -ms-transform: translateY(-10%);
  -o-transform: translateY(-10%);
  transform: translateY(-10%);
}

.header-image-title .maintitle{
  color: #fff;
}
</style>

  1. Paste the following code into the provided “Scripts in footer:” box

<script>
jQuery(function($) {

  var headerText = $('.title-post').text();
  
  var headerHTML = '<div class="header-image-title">'+
                   '<h2 class="maintitle">'+headerText+'</h2>'+
                   '</div>';

  if ( $('.header-image').is(':visible') ) {
    $('.header-image').append(headerHTML);
  }  

});
</script>

  1. Save settings

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

with this code can I use seperate header image and header title on different pages?

Hello there,

You must replicate the following code as it works per page.


.page-id-34 .header-image{
  background-image: url('http://yoursite.com/path/to/image.jpg');
}

Adjust 34 to the respective page ID that you wish to have different header image.

Regards,
Kharis

so if i understood it correct? I have to intially copy and paste the css code in header and footer script. Then I will be paste the css code in simple css custom plugin?

Yes, that is correct. As an information, there are two boxes in header and footer script.

  1. Scripts in header: for CSS code wrapped with style tag <style></style>
  2. Scripts in footer: for jQuery code wrapped with script tag <script></script>

Regards,
Kharis

i tried.it did not work. please help. this is my url http://bethebees.com/about-us

Hello there,

Please try to apply the following CSS code:

.header-image{
  height: 300px !important;
  max-height: 300px !important;
}

.header-inner{
  display: none !important;
}

And supply the correct URL path to your image in the following code:

.page-id-624 .header-image {
    background-image: url('http://bethebees.com/2-3');
}

Regards,
Kharis

It did not work. please davice

It works fine here https://cloudup.com/csMxDDS9KF0. Please try to clear you web browser’s cache.

Regards,
Kharis

I still could not see the picture…
can I put customised text in the header area instead of ‘About us’?

Try to replace the jQuery code I suggested previously at the third step with the following:


<script>
jQuery(function($) {

  var headerText = $('.title-post').text();

  if( $('body').hasClass('page-id-624') ){
      headerText = 'Your text goes here';
  }
  
  var headerHTML = '<div class="header-image-title">'+
                   '<h2 class="maintitle">'+headerText+'</h2>'+
                   '</div>';

  if ( $('.header-image').is(':visible') ) {
    $('.header-image').append(headerHTML);
  }  

});
</script>

Replace Your text goes here with your own words.

Regards,
Kharis

thanks. I still cannot see the picture. Please can you advice how will I put different header text for different pages now?

Hello there,

Replicate these line of code:


  if( $('body').hasClass('page-id-624') ){
      headerText = 'Your text goes here';
  }

and adjust the body class name with the respective page.

Regards,
Kharis

where should I put this code?

should I replace this in the header and footer script or simple css custom plugin?

It will look like the following:


<script>
jQuery(function($) {

  var headerText = $('.title-post').text();

  if( $('body').hasClass('page-id-624') ){
      headerText = 'Your text goes here';
  }
  
  if( $('body').hasClass('page-id-333') ){
      headerText = 'Your text goes here';
  }

  var headerHTML = '<div class="header-image-title">'+
                   '<h2 class="maintitle">'+headerText+'</h2>'+
                   '</div>';

  if ( $('.header-image').is(':visible') ) {
    $('.header-image').append(headerHTML);
  }  

});
</script>

Replace 333 with the respective page ID. To find the page ID, please see this video https://www.youtube.com/watch?v=fLg2T1AvmFE.

Regards,
Kharis

Do I have to repliacte the entire footer script to customise individual page or just the small bit you mentioned in your last post?

Hello there,

You only need to replicate these lines:


  if( $('body').hasClass('page-id-333') ){
      headerText = 'Your text goes here';
  }

not the entire code.

Regards,
Kharis

Wow kharis you are a genius…the text bit worked. Please can you see why the picture bit is not showing up?