how to display text over an image in Bootstrap 3.1

Question

I would like to add text which displays over an image.

Essentially, this what my code looks like:

<div class="ek-background">
<div class="row">
<section id="container">
    <div class="container col-sm-4 col-sm-offset-2">
    <div class="pull-right">
        <h1>TITLE HERE</h1>
            <h2>Let us build your preview for free</h2>
    </div>  
        <img src="img/img/flow-1.png" class="align-center img-responsive">
            <div class="col">
                <div class="col-sm-4">
                    <p>this is a test</p>
    </div>
</div>
</div>

I cannot manage to get "this is a test" onto the proposed section of the image.

I would like to use the parameters of bootstrap.min.css to keep everything consistent. Also, since this will be a responsive design website, I am wanting the text to be responsive with the image so that it does not lose its position

If anyone could help, that would be great :)

possible duplicate of [How to position text over an image in css](http://stackoverflow.com/questions/8708945/how-to-position-text-over-an-image-in-css) — davethecoder, Mar 02 '14 at 00:08
http://stackoverflow.com/questions/8708945/how-to-position-text-over-an-image-in-css — davethecoder, Mar 02 '14 at 00:09

score 49 · Answer 1 · edited Jul 27 '14 at 09:29

I can suggest a way to go around the question: you can use a carousel with a single item, because you can insert text on carousel images thanks to captions:

<div id="mycarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item active">
        <img src="img/yourimage.png" alt="" class="img-responsive">
           <div class="carousel-caption">
           Insert your text here !
           </div>
        </div>
    </div>
</div>

score 15 · Answer 2 · answered Mar 02 '14 at 00:13

You will need to paste additional css to give us an idea of what you're dealing with exactly, but here's my 2 cents anyway:

1) Start by placing the image and the text in something that will contain them both:

<div class="imageAndText">
    <img src="img/img/flow-1.png" class="align-center img-responsive">
    <div class="col">
        <div class="col-sm-4">
            <p>this is a test</p>
        </div>
    </div>
</div>

(Careful, your original code has an extra )

2) Add absolute positioning + z-index:

.imageAndText {position: relative;} 
.imageAndText .col {position: absolute; z-index: 1; top: 0; left: 0;}

Here's a jsFiddle illustrating: http://jsfiddle.net/sX982/

score 0 · Answer 3 · edited May 23 '17 at 12:10

0

I don't think this is possible using bootstrap classes. You can just do something like this by adding thumbnail to the image and thumbnail_legend to the next div.

.thumbnail_legend {
    background: none repeat scroll 0 0 #FFFFFF;
    opacity: 0.5;
    top:0;
    left:0;
    position: absolute;
}

.thumbnail {
    position:relative;
}

from: Bootstrap 3: Text overlay on image

edited May 23 '17 at 12:10

Community

1
1

answered Mar 02 '14 at 00:08

Allan Stepps

1,047
1
10
23

1

this did not work. besides the text is not responsive to the image, meaning i will lose the position of the text as the image shrinks. thanks for posting though :) – user2231397 Mar 02 '14 at 07:00

how to display text over an image in Bootstrap 3.1

3 Answers3

Linked