For the image background solution you could give the container the same aspect-ratio as the image, so it behaves lkind of like an image widget. So add a container, give some width and add a background-image and set background-size to cover. When you choose the background-image in the media library, check the resolution. Eg 1920px * 1080 Select the container, add this CSS selector { aspect-ratio: 1920/1080 } Done. The container will maintain that aspect ratio no matter what your screen size is. If SEO is important you need another appraoch. You can use the image widget and the caption option. When you choose an image in the media library write your text in the caption field. You can write HTML in the caption field, add classes and style it up with some CSS. You can even do that in the custom caption field. To put the caption on top of the image, you will need some CSS and position absolute, but I'm sure you can figure that out yourself.
I made a video showing a solid way to do this with the image widget. Only needed to help out the absolute positioning with some very simple CSS. ua-cam.com/video/E13YU5jU_-o/v-deo.html
The only drawback of background images is from an accessibility pov, in so much as one cannot assign either an image or figure tag to them, thus ARIAs and screen readers basically don't know they exist. My workaround is to use relative and absolute positioning on an actual image element, have the image or its container set to relative, then have the other content (heading etc) set to absolute so it snaps over the top of the image, you may need to put the content on a higher z-index so it's over the image, but it works well and the image can then be seen by the browser and screen readers etc.
From an image optimization perspective, your approach is nice too as many image optimizing plugins do better with normal images versus background. Do you run into any issues with height and width of either the image or the text content? I was thinking of demo-ing this approach but wasn't satisfied with the image and/or text content seeming aware of the size of the other... if that makes any sense.
@@KingGrizzly No issue with height and width, when placing the image, either the original image's aspect ratio will dictate it's height and now in Elementor (I think we have had this for a wile now) you can assign a specific height to the image, and an 'object-fit' dialogue box appears beneath the height slider so you can assign different fit modes such as default - fill - contain - cover etc just like you can on bg images. The other 'gotcha' with elementor though is there is no option to 'position: relative' only absolute and fixed, I drop in a bit of css code to get round that. Have to admit I am embracing Bricks these days more and more for a variety of reasons. Which is a bummer as I will then have to change the name of my channel ;)
@@ElementoryMyDearWatson Thank you. So, your text is absolutely positioned over the image? I'm trying to wrap by mind around what happens if that absolutely positioned text grows. I guess the image will just stretch with it because of the object fit? Will have to test. Bricks looks very nice, so does Breakdance and I've been having some fun playing with Framer. Elementor still appears to have large market share. I just wish they'd address Github.
@ElementoryMyDearWatson I made a 2nd video showing a method I think you'd approve of which uses the image widget instead! ua-cam.com/video/E13YU5jU_-o/v-deo.html
Awesome, no css option. I use exactly this for my hero banners. I'd like to understand why you chose to amend the image RGB alpha channel rather than the background overlay opacity level?
Good question, and thank you very much for watching and commenting! I'm not sure one is better than another. I sometimes overlook the opacity slider and confuse myself, forgetting about the slider so it has worked better for my brain to put it to 100% and then force myself to slide the alpha channel on the colors themselves. In the case of wanting a gradient overlay, then the rgba approach is needed for more tailored control.
@@KingGrizzly great channel btw, thank you for all your tips, clearly an expert in this field. Yes I agree, I believe using the alpha channels yields more flexibility than opacity across the whole background. Thanks for taking the time to reply.
@@MrFrobbo I've got two videos coming up and will be very curious what you think. One is about a font clamp sizing plugin we built and will give away for free and the other is about using helper classes alongside the Elementor grid containers. If you happen to see them, please share your thoughts as you seem to know what you are doing!
@@KingGrizzly looking forward to it, I'll keep my eyes peeled. Font clamping 😳🤔 I have no idea, but it's all good learning though. I'm just mastering global/H12,3,4 etc fonts (the first of your vids I watched) which I nailed across displays today, with a bit of help from analysing the big player web sites and a chrome plugin called Whatfont, which is truly handy! I'm looking for a decent header and footer plugin to compliment Elementor lite, I'm working my way through them but most are quite flaky or limited sadly
For the image background solution you could give the container the same aspect-ratio as the image, so it behaves lkind of like an image widget.
So add a container, give some width and add a background-image and set background-size to cover.
When you choose the background-image in the media library, check the resolution. Eg 1920px * 1080
Select the container, add this CSS
selector {
aspect-ratio: 1920/1080
}
Done. The container will maintain that aspect ratio no matter what your screen size is.
If SEO is important you need another appraoch. You can use the image widget and the caption option.
When you choose an image in the media library write your text in the caption field.
You can write HTML in the caption field, add classes and style it up with some CSS. You can even do that in the custom caption field.
To put the caption on top of the image, you will need some CSS and position absolute, but I'm sure you can figure that out yourself.
I made a video showing a solid way to do this with the image widget. Only needed to help out the absolute positioning with some very simple CSS. ua-cam.com/video/E13YU5jU_-o/v-deo.html
The only drawback of background images is from an accessibility pov, in so much as one cannot assign either an image or figure tag to them, thus ARIAs and screen readers basically don't know they exist. My workaround is to use relative and absolute positioning on an actual image element, have the image or its container set to relative, then have the other content (heading etc) set to absolute so it snaps over the top of the image, you may need to put the content on a higher z-index so it's over the image, but it works well and the image can then be seen by the browser and screen readers etc.
From an image optimization perspective, your approach is nice too as many image optimizing plugins do better with normal images versus background.
Do you run into any issues with height and width of either the image or the text content? I was thinking of demo-ing this approach but wasn't satisfied with the image and/or text content seeming aware of the size of the other... if that makes any sense.
@@KingGrizzly No issue with height and width, when placing the image, either the original image's aspect ratio will dictate it's height and now in Elementor (I think we have had this for a wile now) you can assign a specific height to the image, and an 'object-fit' dialogue box appears beneath the height slider so you can assign different fit modes such as default - fill - contain - cover etc just like you can on bg images. The other 'gotcha' with elementor though is there is no option to 'position: relative' only absolute and fixed, I drop in a bit of css code to get round that. Have to admit I am embracing Bricks these days more and more for a variety of reasons. Which is a bummer as I will then have to change the name of my channel ;)
@@ElementoryMyDearWatson Thank you. So, your text is absolutely positioned over the image? I'm trying to wrap by mind around what happens if that absolutely positioned text grows. I guess the image will just stretch with it because of the object fit? Will have to test.
Bricks looks very nice, so does Breakdance and I've been having some fun playing with Framer.
Elementor still appears to have large market share. I just wish they'd address Github.
@ElementoryMyDearWatson I made a 2nd video showing a method I think you'd approve of which uses the image widget instead! ua-cam.com/video/E13YU5jU_-o/v-deo.html
Awesome, no css option. I use exactly this for my hero banners. I'd like to understand why you chose to amend the image RGB alpha channel rather than the background overlay opacity level?
Good question, and thank you very much for watching and commenting! I'm not sure one is better than another. I sometimes overlook the opacity slider and confuse myself, forgetting about the slider so it has worked better for my brain to put it to 100% and then force myself to slide the alpha channel on the colors themselves. In the case of wanting a gradient overlay, then the rgba approach is needed for more tailored control.
@@KingGrizzly great channel btw, thank you for all your tips, clearly an expert in this field. Yes I agree, I believe using the alpha channels yields more flexibility than opacity across the whole background. Thanks for taking the time to reply.
@@MrFrobbo I've got two videos coming up and will be very curious what you think. One is about a font clamp sizing plugin we built and will give away for free and the other is about using helper classes alongside the Elementor grid containers. If you happen to see them, please share your thoughts as you seem to know what you are doing!
@@KingGrizzly looking forward to it, I'll keep my eyes peeled. Font clamping 😳🤔 I have no idea, but it's all good learning though. I'm just mastering global/H12,3,4 etc fonts (the first of your vids I watched) which I nailed across displays today, with a bit of help from analysing the big player web sites and a chrome plugin called Whatfont, which is truly handy! I'm looking for a decent header and footer plugin to compliment Elementor lite, I'm working my way through them but most are quite flaky or limited sadly