Adding a floating image over a sliding header

graecille · September 2, 2019, 5:34am

Hi there,

I’m looking to float/overlay an image with text over the 6th of the header slides on this site:
https://www.malenytropicalretreat.com The owner has sent me a new header image (already uploaded - number 6 slide) with the text he would like already embedded in the image. You will see when it loads in smaller screen sizes the image/text part stays to the right and doesn’t appear in the center. After checking the existing code, can someone suggest coding for a separate image to float above slider image in the existing html.
Thanks in anticipation, Graeme

PaulOB · September 2, 2019, 2:21pm

That’s because the image is placed at left top. You would need to change the settings of the slider to place the image at center center.

In CSS that would be like this:

.tp-bgimg.defaultimg {
    background-position:50% 50%!important;
}

However the correct way would be to adjust the slider settings to display the images at center position as the rules are written dynamically into the tag.

You can see it has a data attribute added for the position.

data-bgposition="left top"

I’m guessing that if you change the option in the img tag to center center it should work.

You have this:

<img src="[images/slides/mtr-advertisement.jpg](https://www.malenytropicalretreat.com/images/slides/mtr-advertisement.jpg)" alt="Maleny Special" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">

Change to this instead:

<img src="[images/slides/mtr-advertisement.jpg](https://www.malenytropicalretreat.com/images/slides/mtr-advertisement.jpg)" alt="Maleny Special" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">

Not quite sure what you are asking for there?

graecille · September 2, 2019, 11:13pm

Hello Paul,

Thanks so much for that, it worked perfectly and also I changed it on all the other images and they also now center better too. That last line you refer to, I was meaning did I need to get a separate image with the text on it to float over the header image. However, the way you have done it eliminates that idea anyway, so great.
However I now ask is there also a simple way to get all the text in the headers which is currently set up as data-x and data-y axis’s to also stay evenly centralized as screen sizes reduce?

Regards,
Graeme

PaulOB · September 3, 2019, 3:02pm

I’m guessing that you should look at the documentation as that should be one of the options.

However we could force the issue with CSS.

.revolution-slider .caption{
    left:0!important;
    right:0!important;
    width:auto;
    text-align:center;
}

That’s probably not the right answer (although seems to work perfectly) as I don’t see why your slider would offset center everything like that by default. The second line doesn’t seem to be centred at all in any width in your original display…

graecille · September 4, 2019, 4:00am

Hi Paul,

Thanks again. That is much better. Simple when you know how. I have however left all the data-x and data-y axis’s as they were. I assume I don’t completely remove these?

Cheers,
Graeme

PaulOB · September 4, 2019, 10:25am

There should be no need to remove them when the css I have has been added.

Indeed it may be that the JS is relying on them being in place (if the JS is badly written ) but that would be something to look up in the documentation for the slider plugin.

graecille · September 4, 2019, 10:01pm

Thanks again Paul, I will leave things as they are. It is much better.

Best regards, Graeme

system · December 5, 2019, 5:01am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.