Hi everyone. I am trying to find the most effective way of having a container with an image with centered text on top that changes responsively.
I am not a fan of the background image as not been able to get the size of the image correct or it is totally off skew.
I have tried having the container as position relative and the text container as position absolute with bottom 20px etc but that does not seem to work on small screens with IE11.
I can use grid for a perfect solution but again IE fails.

Is there a bulletproof way of doing this?
Kind regards,
Phil

Hi Phil,
Check out on my sharing page, under 'Other'. I have one with a translucent image with text on top, and the other one with a translucent text background on top of an image. In both cases the text chages with the screen width. If you don't want the translucency, you can drop that, of course.

Those two files are using background images, but with the first one, where you have another container on top of the one with the image, it is also possible to add the image as part of the content.

I made a quick change to that first trnslucent example, removing the background image and added it as a decoration image instead. I have not done any changes to the text though, but that can be done, as it is on a different layer. (in a different container). I also removed the opacity from the container 'hero-holder', but if you want it, you can add it back.

Hi
to center text on picture I do that:
- add a container, position relative
- add picture in container
- add text element in container, give it some width and height
(e.g. width 200px and height 30px)
substract half mesure for margin-top (here -15px) and margin-left (here -100px)
margin-bottom auto margin-right auto
and give position absolute, top 50% left 50% (bottom and right auto)
now text is centered width and height in container

A simple test to show my prec post : http://www.ycarry.fr/Docs/center_text_Project/