Replace "Time to go west" with a transparent image

Is this possible? I want to put a word cloud in that location instead of “Time to go west”.

Hello there,

To replace that text with an image, the easiest way is use jQuery script. Try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    (function($){

     if( $('.header-info-inner .header-text').length ) {

       var image = 'http://yoursite.com/path/to/your-image.png';

       $('.header-info-inner .header-text').html('<img src="'+image+'" />')

     }

    })(jQuery);

Replace http://yoursite.com/path/to/your-image.png with a valid image URL. You can get it from media library (Dashboad > Media).

  1. Update

Regards,
Kharis

This worked great, but left a huge gap between the menu line and the image. I entered the following css…

.header-image {
position: static;
text-align: center;
}

Will there be any issues cause with this?

EDIT: This messed up stuff. I got rid of this and found a different solution using the following CSS:

/* Move the word cloud up on the page */
.header-info {
top: 20%;
}

I just took the page out of maintenance mode. It looks almost great on desktop, but not so good on mobile.

On the desktop view, if I scroll the bottom of the background doesn’t have shading overlaid on it.

On mobile, the photo (a landscape photo) is shrunk and there are grey bars on top and bottom, and the menu is on top of the graphic.

The website is aeslms.ca

Done here. I’ll start a new thread with other issues. Thanks!

Hello there,

I just replied you there Can I make the background image full screen when on mobile?

Regards,
Kharis