Title: Static Header (Hero) section image
Last modified: January 18, 2017

---

# Static Header (Hero) section image

 *  [friveraus](https://wordpress.org/support/users/friveraus/)
 * (@friveraus)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/static-header-hero-section-image/)
 * Hi Support:
 * I am new to WP and the Sydney Theme, I would like to have one image in the Header
   section and some text.
 * So far I have not been able to make that happen. Please help!
 * Felix

Viewing 8 replies - 1 through 8 (of 8 total)

 *  Thread Starter [friveraus](https://wordpress.org/support/users/friveraus/)
 * (@friveraus)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/static-header-hero-section-image/#post-8670203)
 * Oops, I figured out how to have just one image in the header.
 * How to I add text?
 *  [Kharis Sulistiyono](https://wordpress.org/support/users/kharisblank/)
 * (@kharisblank)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/static-header-hero-section-image/#post-8671985)
 * Hello there,
 * > I figured out how to have just one image in the header.
 * Great! That you figured it out.
 * > How to I add text?
 * Adding some text on the hero image is actually impossible by default as there
   is no associated option in the customizer. However, we can accomplish it by adding
   a couple of jQuery code to insert new content block into the hero image markup.
   Please try doing the steps below:
 * 1. Install and activate the [TC Custom JavaScript](https://wordpress.org/plugins/tc-custom-javascript/)
   plugin
    2. Go To **Appearance** > **Custom JavaScript** 3. Paste the following
   code into the provided box
 *     ```
       (function($){
   
           "use strict"
   
           var text        = 'The image title goes here.';
           var headerImg   = $('.header-image');
           var headerText  = '<div class="header-image-text">'+
                             '<div class="inner">'+
                             '<h2 class="maintitle">'+text+'</h2>'+
                             '<div>'+
                             '</div>';
   
           if ( headerImg.is(':visible') ) {
             headerImg.append(headerText);
           }  
   
       })(jQuery);    
       ```
   
 * 4. Update
 * To style the new element positioning and define text color and size, you need
   to add the custom CSS code below into your site’s additional CSS (Appearance 
   > Customize > Additional CSS).
 *     ```
       .header-image-text{
         position: absolute;
         top: 0;
         left: 0;
         height: 100%;
         width: 100%;
         text-align: center;
       }
   
       .header-image-text .inner{
         display: flex;
         height: 100%;
         align-items: center;
         justify-content: center;
       }  
   
       .header-image-text .maintitle{
         color: #fff;
         font-size: 57px;
         line-height: 67px;
         font-weight: 700;
       }  
       ```
   
 * You would do an adjustment if only needed.
 * Regards,
    Kharis
 *  Thread Starter [friveraus](https://wordpress.org/support/users/friveraus/)
 * (@friveraus)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/static-header-hero-section-image/#post-8679254)
 * Thank you, Kharis!
    You are the best!
 * I do have one more question, I am new to WP, so now, How do I add the text that
   I want on to the Header image?
 * I know it’s a fundamental question, but I really do not know how to add the text.
 * Felix
 *  [Kharis Sulistiyono](https://wordpress.org/support/users/kharisblank/)
 * (@kharisblank)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/static-header-hero-section-image/#post-8680750)
 * > How do I add the text that I want on to the Header image?
 * Could you please point me to the your page URL where I can see that header image,
   so I can be more precise?
 * Regards,
    Kharis
 *  Thread Starter [friveraus](https://wordpress.org/support/users/friveraus/)
 * (@friveraus)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/static-header-hero-section-image/#post-8680758)
 * Sure, the URL is [http://gwhs.spectrawebdesigns.com](http://gwhs.spectrawebdesigns.com).
 * Thank you for taking the time to help me.
 * Felix
 *  [Kharis Sulistiyono](https://wordpress.org/support/users/kharisblank/)
 * (@kharisblank)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/static-header-hero-section-image/#post-8680879)
 * Hello Felix,
 * Could please confirm if [the code](https://wordpress.org/support/topic/static-header-hero-section-image/#post-8671985)
   I suggested previously doesn’t work for you?
 * Regards,
    Kharis
 *  Thread Starter [friveraus](https://wordpress.org/support/users/friveraus/)
 * (@friveraus)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/static-header-hero-section-image/#post-8681921)
 * Hi Kharis:
 * It is not that the code did not work, I just don’t know how to add the text that
   I want to the header.
 * I looked under Appearance>Header, did not see a place to add the header text,
   in any of the options, Type, Slider, Media, Style.
 * Felix
 *  [Kharis Sulistiyono](https://wordpress.org/support/users/kharisblank/)
 * (@kharisblank)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/static-header-hero-section-image/#post-8685810)
 * Hello there,
 * Nothing wrong with the header options. For design purpose, we don’t include that
   option in Sydney. You might have ever seen it on other theme, but it isn’t a 
   mandatory aspect. As every theme is unique, it has its own features that might
   not be found on other, including Sydney. However we still have a chance to add
   some text on the header image by adding a couple of jQuery code. For more advance,
   some would develop a [child theme](https://codex.wordpress.org/Child_Themes) 
   or [writing a plugin](https://codex.wordpress.org/Writing_a_Plugin).
 * I hope this clarifies things a bit.
 * Regards,
    Kharis

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Static Header (Hero) section image’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/sydney/2.68/screenshot.png)
 * Sydney
 * [Support Threads](https://wordpress.org/support/theme/sydney/)
 * [Active Topics](https://wordpress.org/support/theme/sydney/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/sydney/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/sydney/reviews/)

 * 8 replies
 * 2 participants
 * Last reply from: [Kharis Sulistiyono](https://wordpress.org/support/users/kharisblank/)
 * Last activity: [9 years, 4 months ago](https://wordpress.org/support/topic/static-header-hero-section-image/#post-8685810)
 * Status: not resolved