Please Help: Code Different Text Over My 3 Images

1

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.

3

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