Hi
I am really struggling to acheive this layout
I have set up a test page - http://cre8tivesource.co.uk/test/about/grading.htm
But I am struggling to overlay the text on a responsive inline image.
I would really really appreciate any help with this.
Much appreciated.
Thanks
Why don’t you use a background image instead and use ‘background-size:cover’ to keep the image responsive. In that way you just need to create the 3 blocks as usual.
Hi Paul
But If I use background-size:cover, the image will not maintain its aspect ratio when the browser is re-sized, is that correct?
Thanks
No, that is incorrect.
Background-size:cover preserves the aspect ratio while making sure the image fits the element completely. This is especially good when you have variable height text content because the space the text content needs will always be covered by the background image unlike your method of putting the text on top of the image because at some sizes the text will run off the image.
The difference with background-size is that the image will always fit the allocated space but it may mean that in order to do this the image is enlarged (while preserving the aspect ratio) so that the whole background is covered. This may result in some of the image being off screen in order for this to happen.
It is still the best method to do this effect however. Just try it and see 
Otherwise you will need to absolutely place your text on top of the image and control the height explicitly.
I just worked it out (relatively speaking) using the foreground image and the absolute position method. Not very clean because I chose to disable bootscrap.min.css, but the centering works nicely. No changes to the HTML.
EDIT:
Got it. Had to disable the float on col-md-4. bootstrap.min.css restored
Thanks Paul
I will give it a go.
Hi Ronpat
Could I take a look?
Thanks
I think you have changed your code since the first post.
This is the working page that came up with. Most of my changes are in local styles at the bottom of the CSS. Be suspicious… I may have failed to move one or two down there.
There is ONE change to the HTML. I moved the large foreground image UP one level. Check the path to the image. That’s it.
This is what I see on my PC in Firefox
text-over-images-davvam.html (8.2 KB)
Hi Ronpat
Let me download and implement this and see what I get 
Thanks, I will let you know how I get on.
Thanks again.
Verify that the path to the foreground image is correct, then double-click the file to open it in your browser. What you see should match the screenshot. :fingers-crossed:
Hi
I also need the other two tabs to either use the same image when you click on the other two tabs.
I am using this as my example tab code - http://webthemez.com/demo/easy-responsive-tabs/Index.html#ChildVerticalTab_11|parentHorizontalTab1
I thought this was good as other pages I need to create require vertical tabs and this also implements an accordion when you view the site on mobile devices.
So not sure If I have found the right tabs js, I have been searching for over 4 hours!
You might know of an easier plugin I can use that can acheive what I am after?
I tried to implement your code, but I can no longer click on the second tab or third tab to bring its content in (after un-commenting your code)
Hope that makes sense!
Thanks again for your help, much appreciated.
First. When you set the path to the image in the code that I posted, and opened the file in your browser, did the image in your browser match the screenshot?
The technique uses a foreground image to set the aspect ratio of the box.
I don’t remember you mentioning vertical tabs and accordions and the commented out code was essentially empty.
In any event, this is probably as far as I can go.
It is possible that I misunderstood the question.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
