How to Keep Text Inside the Parameters of a Responsive Image

Continuing the discussion from Display Text Over a Responsive Image in Bootstrap (Tribute Page Challenge):
With the help I’ve received on this forum, I was able to place text over the top of an image (kind of like an overlay) using position: absolute/relative and width: 10vw/vh etc.

However, I am now having an issue that when I make the page screen smaller, the h1 will drop below the picture rather than becoming smaller inside of the picture, if I’m explaining that well. Please feel free to check out the page in question with this link http://codepen.io/ToTh33dge/full/ezpMVj/


I was using a class="container-fluid" before I decided to try the class="jumbotron" as I am trying to contain the h1 to the same parameters as the image.

I guess they’d have to be inside the same div and then you’d have to play around with the margins. n00b reply*

OH! I had a look, you should try using that image as the background to your jumbotron instead of a pic inside of it :slight_smile: hope that helps

2 Likes

This sounds more correct. You can add the background image with CSS to the body or container, and set it to 100vh, or the HTML to 100%. Then all nested content should stay within the background image when scaling to smaller screens. Look at this Bootstrap example here

1 Like

You’ve been on Colt Steele’s course too :smiley: fist bump*

Nice! :punch: Hope that is first bump emoji, says punch lol

1 Like

Ohhhh…Thank you! I will do that and post the results. So stoked to get this tribute page up and running!

Thanks! I hadn’t thought of that :sweat_smile: I will give it a go and post back once I’ve found success or broken something!

1 Like