Background Image with Button Overlay

Support
#1

I have added an image to a column and have added an email button though the button appears below the image and not on top. I realise now that it needs to be a background image to use a button and text as an overlay. The reason I did it as an image element due to the image having text already embedded in Photoshop, otherwise I would have brought it in as a background image, but read a thread indicating it was better to use an image element on this occasion.

As an image element, it is naturally responsive, but as a background image, it is all over the place. The image is 1920 x 1080, which should be a perfect responsive size according to the post I read. It will be fine to have some of the width cropped, but not the height when the size adjusts

So are you able to tell me if this will be possible to have a background image which resizes so the height of the image fits the screen size at all times? If need be, I can remove the text from the original image and use a text element, should you think that is the preferred way to approach this; a card element with a button overlay or whatever is best

The second element is having the button adjust size as well, so I guess using calc() will work best, but have tried various configurations and have yet to find one which accommodates the 5 screen sizes available. When I adjust the bottom margin of the button, the background is adjusted as well, so am not making great progress

Would you mind taking a look for me and just pointing me in the right direction?

Cheers

#2

Hi Guy,

Thank you for writing in, you can still make that work if you add the Image as an Image element then place your button inside a Div element.

Then configure that Div element to position absolute and play with the top, bottom, left, right settings on where do you want that button to be (https://i.imgur.com/Z9wVGbp.png).

Hope it helps,
Cheers!

#3

hi Friech

Thanks so much for your reply

No problems with the image element. It now resizes correctly and have added a button inside a div element. The issue arises with making the button and text resize responsively. I initially added a class to the button of booking-button (no full stop correct?) and have added .booking-button (with full stop) as the selector in responsive text, yet the text does not appear to resize. I have now removed the class and responsive text.

The issue with the button position I would have thought an easy one, as it needs to be centre of the section, both horizontally and vertically. Since the button is inside a div, do I actually need to give the div a class and try using css to centre it? The button centres horizontally alright with left and right set to 0 in the div, but how to centre it vertically?

cheers

#4

Hi Guy,

Yes, that is correct, however, you need to add .x-anchor-text-primary on the selector since that is the class of the primary text of the button, so the final selector would be .booking-button .x-anchor-text-primary

Also play with compress, minimum size, and maximum size, not too drastic, try 0.5, 14px, 24px respectively.

No.

In the div element same as left and right set to auto to center horizontally, you can also set the top and bottom to auto to center it vertically.

Hope it helps,
Cheers!

#5

Hi Friech

Thanks for your reply

With the div, it does not behave as you have described. If I set left & right, top & bottom all to auto, this is where the button sits
Screen Shot 2564-07-13 at 13.50.25

It is out to the left and at the very top.

If I change left and right to 0, the button centres horizontally, but with top & bottom set to 0, no change from when it is auto. The only way to move it vertically has been to set a top position of something like 50%. Actually, you would expect 50% to be ideal, as the hole in the text for the button is at exactly the halfway point, but 50% pushes it too low, so have opted for 43%.

Just a question re this; setting a top position of 43% simply pushes the top of the div down to that point, but the button is still at the top of the div. Surely that is not the objective. Is not the objective to have the button move vertically within the div, rather than the div move down from the top

It really seems like it should be a relatively simply thing to do; create an element and have it sit dead centre on a page…both horizontally and vertically, but in fact it is anything but a simple take. Horizontally is pretty straight forward, but vertically is anything but accurate; almost as if you need to have different settings for different screen sizes, yet it is an exact 50% position

So before I go further with trying the responsive text, any thoughts on having the button locate at the exact centre of the section?

cheers

#6

Hey @guybower1,

Upon checking, setting the Top and Bottom position to auto centers the Div with the Button.

image
image999×413 157 KB

That is because the Align Vertical setting of the Column is set to Center.

image
image1005×267 116 KB

Just to demonstrate so you could see another example, setting the Align Vertical to Start would position the Div up as the Child Placement is set to Column. You can learn how to utilize Flexbox from our article here https://theme.co/docs/use-flex-layout

image
image1102×398 176 KB

Regarding the Responsive Text, I recommend you use the modern method which is using the Fluid Typography method instead of the old Responsive Text feature which uses Javascript. The video below will show you the fluid typography setup.

Hope that helps.

#7

hi Christian

Thanks so much for your reply

Lightbulb moment! I didn’t have the Flexbox switched on, which was obviously the culprit. Have activated it and now it centres as you have shown

I will play further with the calc function to achieve fluid text

Thanks again

#8

You are most welcome @guybower1.

#9

Hi Ruenel

Further on the issue of the responsive text and button, is there an issue with the screen size preview in the builder? I played around for ages getting a setting which worked well right through all screen sizes in the preview, but I now find that this preview is miles off.

Here is an example from the preview window

Screen Shot 2564-07-28 at 03.27.11

This is what is showing in the preview window for the smallest size - XS

The reality is it actually looks like this in responsinator and on my phone

Screen Shot 2564-07-28 at 03.31.40

They are not even close, with both the height and width out.

How is one to accurately use the size previews to check if it does not accurately reflect what is showing?

#10

Hi @guybower1,

It seems that the Font Size is the reason behind your issue, in the Editor it shows in the mentioned size, but in the phone, the size is not adjusted to that screen size. In this case, you need to adjust the Font Size in different screen sizes using the custom CSS code.
Your code may look like this.

@media  (max-width: 480px) 
{
    .x-anchor-text-primary
    {
        font-size: 15.275px;
    }
}

I would also suggest you go through the following article on different breakpoints to adjust the size for those: https://medium.com/@uiuxlab/the-most-used-responsive-breakpoints-in-2017-of-mine-9588e9bd3a8a

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

#11

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