Display Text Over a Responsive Image in Bootstrap (Tribute Page Challenge)

Display Text Over a Responsive Image in Bootstrap (Tribute Page Challenge)
0

#1

Hey campers! I’ve just started on my tribute page and I’m having some issues with placing some text on an image.

I’d love to post the code so I could get more detailed feedback, unfortunately I haven’t quite gotten the hang of this forum and it doesn’t dis play the html when I try to post this. If anyone has advice on how to show the actual html on this forum, please let me know below :slight_smile: Thanks!

I’ve managed to get the picture to be fully responsive, but even after doing a few hours’ research on stackoverflow and other sites, I don’t understand how to place my

tag over the image.

I’ve tried using div class=“caption” around the h1 tag or placing both the h1 and img tags in a container, but to no avail.

Help?


#2

Hey you can use the </> icon which appear in the bar above your post (when writing/editing). You can also include a link to a codepen


#3

Can you clarify your question? Are you trying to have text show up over top of a picture?


#4

Not entirely sure if this will be helpful, but here are some things to try:

  1. If you set your text element to have position: absolute, but do not do so for the img, it will act as though the image is not there and you will be able to move it around over the image by setting your margins.

  2. If you want the text to resize along with your image, I suggest using vw or vh instead of px as your units. This will size your text according to the window width or height as a percentage.

Hope this helps!


#5

Yes. I have a responsive image at the top of my page that I am trying to place an h1 over the top of said photo. Thank you for asking for a clarification! I didn’t realize I had made my request a bit vague.


#6

Thank you! I will give that a try! :smiley:


#7

Benedict Cumberbatch Tribute Page 1.0 Here’s the link to my codepen.io project. I’ve been working offline on Brackets, so it took me a minute to reconstruct the project in a pen.


#8

I tried this and it worked - not sure if it would be responsive though:
Text over image


#10

THANK YOU!!! :smiley: The tutorial was perfectly easy to understand. I’m going to look into making it responsive, but I think the major hurdle is done with now that the text is where it belongs.

I appreciate the help everyone!