Text overlay limitation
-
There appears to be no way to get an image to display in full (not cropped), scaling to the width of the window, with overlaid text centered vertically over the image.
Here’s an example of a website that does this successfully (presumably without Elementor.) See the “Telling the Full History” text over the image and how the text stays centered and the full image resizes as you resize the window. https://savingplaces.org/
This is a basic layout that Elementor should be able to do easily. Is it something the developers overlooked, or am I missing something?
-
LesTexas, height: “fit to screen” doesn’t accomplish this. It instead only shows the single section/image on the screen vertically and fills the remainder of the screen with whitespace until the next section. Or is there something I’m missing?
Here is a youtube that explains it:
Not sure what you mean “it would then make most of the background image options nonsensical.” Say you add a text widget and then set the background to your image, you can add as many blank text lines to make your image height increase. Then you add another Text widget below that and add another image background there. If there are gaps you want to get rid of, just adjust the margins.
Look at tiger721.com again. I added 2 additional images over the original.The original glass is the section background and then another glass and lace are widget backgrounds.
No, I mean when you change the size of your browser window (particularly horizontally,) the image I’m talking about correctly scales to the window width as opposed to being cropped on the sides, padded with whitespace on the sides, or repeated horizontally.
Thank your clarifying, there are so many ways to interpret a description. I see what you mean now. You have peaked my curiosity. I have found there is usually a way to do most anything, you just have to keep looking until you find the right settings. I’m looking forward to trying the new Elementor version, it’s supposed to provide easier access to the settings. I would think someone would know the answer to this one.
I just tried this using Chrome and FireFox & Edge. Edge cropped at 1/3 the screen, Chrome cropped at just under half and FireFox at half. This was looking at the same site you displayed. I’m using Win 10 with the most current versions of browsers.
Looking at your pictures, you only went down to half the image so it did still work. This does work with the size as “cover” but in my test and on your sample page the top of the image is truncated as the width lessens.@lestexas60, yes the image does “crop” when you resize smaller. That is a conscious design choice by the skilled web designers at savingplaces.org. When the user goes to tablet or phone-sized widths, the image changes to a differently cropped version of the photo, which then scales just as the larger crop scales. I was didn’t mention it because it’s not relevant to the discussion.
I will continue shopping for more robust page builders. I expect Guttenberg should be able to handle this task.
@logologics thanks also for trying to help. What it appears you’ve done is create a full-screen section (see the fourth comment from above.)
LesTexas, height: “fit to screen” doesn’t accomplish this. It instead only shows the single section/image on the screen vertically and fills the remainder of the screen with whitespace until the next section.
Re: the purposeful “crop” for smaller screens, as I said, that’s not relevant to the limitation in Elementor. This post isn’t about different layouts for different screen sizes, which I’m already aware of. At this point, it’s apparent that the inability to scale an image with text overlay without fitting to screen is a serious deficiency in Elementor.
im new here but i dont think this is possible. i would love the option to add content and layers over an image element as well. maybe i can via query id?
your link uses flexbox. you can add this feature with some custom css i suppose
- The topic ‘Text overlay limitation’ is closed to new replies.
