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

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #188964
    miss-thong
    Participant

    <HTML>

    <div class=”col-xs-3″
    <img class=’img-responsive’

    <CSS>

    .col-xs-3{
    height: 5px;
    max-width: 100%;
    max-height:100%;
    background-size: 100%;
    background-position: center center;
    text-align: center;
    }

    Hello i’m really struggling to put text over an image in bootstrap framework, I really appreciate some help. I also used image-background css but this isn’t help either ( background-image: url();

    is this something to do with position? or z-index?

    All help welcome, Thankyou.

    #188965
    John
    Participant

    Either a link to the problem or a reduced codepen.io might help us look at what the issue is.

    #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…

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.