Tribute Page
I’m currently working on the tribute page challenge and I am trying to place text with a black text-background over the 3 poster image. Ideally, I want to place the text bottom-center of the image. I’m trying to cover up the part of the image that has the poster text & movie logo.
Can anyone please help with right code to do that? I YouTube & googled for some help, but the codes didn’t fit right or I couldn’t understand the tutorial.
Personally, I would do this in Photoshop to add a bar with text to the bottom of the photo, but since you’re asking for CSS, try starting with this:
Add a class to your stylesheet.
.middle-pic {
background-image: url("http://www.joblo.com/posters/images/full/ladyclawpanther.jpg");
}
Then replace this line in your body:
<div class="column text-primary text-center"><img id="shuri" src="http://www.joblo.com/posters/images/full/ladyclawpanther.jpg"></div>
With:
<div class="column text-primary text-center middle-pic">THIS IS YOUR TEXT</div>
Now you can see that your image is the background image for your cell and you can put text “in front of it”.
1 Like