Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS BootStrap text over image issue Reply To: BootStrap text over image issue

#188967
Paulie_D
Member

So as I see it you have an image inside a div (at least according to your brief HTML) but that div is then set to be only 5px tall!

It’s really hard to understand what you are trying to do.

As far as putting text over an image there are two basic methods.

Firstly, create your div to hold the text and use a background image.

Secondly, if your image is in the HTML (not a bg image) then to position text over the top of it you need to wrap the image in it’s own little wrapper independent of any other wrapper you might have (unless the image is just going to sit there by itself which seems unlikely).

This wrapping div would usually be display:inline-block and position;relative which will shrink-wrap the div the image size and allow us to place the text where we want it.

Speaking of text…

Generally, the text element that you want to use must also be inside that wrapper. We can then use absolute positioning on the text element to move it into the right place.

http://codepen.io/Paulie-D/pen/ziFep
Those are the basics…