Text over video


#1

Hi,

I successfully followed the steps in this link via the forums here to get text overlayed on top of a video for my frontpage, but I can’t quite see the white text when the luminance is high. So, I would like to create a background color for the text and manipulate the opacity to make it somewhat transparent so the text can be seen a little better when background luminance is high. Can someone show me how to edit the custom javascript pasted below to do so?
Thanks in advance.

(function($){

"use strict"

if( $(‘body’).hasClass(‘home’) ) {

var mainTitle    = 'Video And Photography Productions';
var subTitle     = 'We Make It Look Good';
var buttonURL    = '#primary';
var buttonLabel  = 'Click to Learn More';

var heroContent  = '<div class="slide-inner">';
    heroContent += '<div class="contain text-slider">';
    heroContent += '<h2 class="maintitle">'+mainTitle+'</h2>';
    heroContent += '<p class="subtitle">'+subTitle+'</p>';
    heroContent += '</div>';
    heroContent += '<a href="'+buttonURL+'" class="roll-button button-slider" target="_top">'+buttonLabel+'</a>';
    heroContent += '</div>';

$('.sydney-hero-area').append(heroContent);

}

})(jQuery);


#2

Hello there,

To add a text background, you shouldn’t need to edit that code. You’d need to add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .text-slider {
      background-color: rgba(255,255,255,0.7);
    }

Regards,
Kharis


#3

Thanks, however this spans the background color across the entire page. How can I confine this background to just the text?

Thanks again!


#4

Hello there,

Try this code:

    .text-slider h2 {
      background-color: rgba(255,255,255,0.7);
    }

Or

    .text-slider p{
      background-color: rgba(255,255,255,0.7);
    }

Regards,
Kharis


#5

For the maintitle “:text-slider h2” works perfect for the top line.

The second line however, for the subtitle, using “.text-slider p” the background still spans across the page, including one additional blank line below.

Any ideas?
Thanks!


#6

Do you have a link to share? So I can have a direct look?

Regards,
Kharis


#7

#8

Thank you for sharing.

Please try adding this CSS code:

    .text-slider .subtitle {
      display: inline-block;
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 10px;
      margin-top: 10px;
      margin-bottom: 10px;
    }

Regards,
Kharis


#9

Thanks for looking. inline brings it up to the same line as the maintitle. Ill leave it up for a bit if you want to look again.


#10

Hello there,

It appears like this to me. Doesn’t it look like what you want?

Regards,
Kharis


#11

try at a higher resolution. as you scale close to 720 vertical pixels and higher it happens.


#12

Hello there,

Try replacing this code:

    .text-slider .subtitle {
      display: inline-block;
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 10px;
      margin-top: 10px;
      margin-bottom: 10px;
    }

with:

    .text-slider .subtitle {
      display: table;
      margin-left: auto;
      margin-right: auto;
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 10px;
      margin-top: 10px;
      margin-bottom: 10px;
    }

Regards,
Kharis


#13

You da man! Perfect.

Thanks again!


#14

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis