how to place text below background image using inline block property

问题

hello i'm trying to put text below a background images. like here i want place two background images side by side and below each image i wanna place text. i have take one div class it has styles inline block property. so how i can do this with the help of or using inline block property.i have explained my problem as much as i can. if it is possible then please go through my fiddle link. i have tried by this properties but text is overlaping on the image i want that below the image also check similar questions no one has done with background image so please check out my code what i have tried it is given in the comment box. please help me thanks. :)

回答1:

You haven't set a css property for your paragraph tag within your imgcontainer.

In my fiddle, I added the following :

.imgcontainer p {
  position: relative;
  top: 100px;
}

I also added a background-size to both of the background images. I used background-size: cover; (I replaced the image urls with ones that I have in my image folder on my website)

https://jsfiddle.net/RachGal/f0fsLd2h/ :Fiddle

回答2:

I hope this was what you where looking for.

Here is a link to an updated fiddle: Fiddle

If you change te background-color to an image, it should still work

I simply added:

.imgcontainer p {
  position: relative;
  bottom: -90px;
  max-width: 100px;
}

To the paragraph

来源：https://stackoverflow.com/questions/42665995/how-to-place-text-below-background-image-using-inline-block-property