CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Gofilord
Gofilord

Reputation: 6641

Floating text on bottom of image

I'm trying to create something like this: What I am trying to create But I just can't get it right. Here is what I have so far: jsfiddle.
HTML:

<div class="review">
    <div class="review-head">
        <h2> Batman Arkham Knight Review </h2>
    </div>
</div>

CSS:

.review-head {
    height: 20em;
    background: url(http://www.flickeringmyth.com/wp-content/uploads/2014/03/Arkham-Knight2.jpg) no-repeat center center;
    background-size: cover;
}
h2 {
    color: white;
    vertical-align: center;
}

What am I missing here?
If it matters or not, I'm trying to put the image inside a Bootstrap panel. Thanks for help!

Upvotes: 0

Views: 54

Answers (3)

Turnip
Turnip

Reputation: 36702

Give your review-head element a position. This will allow you to position the h2 within it.

.review-head {
    height: 20em;
    background: url(http://www.flickeringmyth.com/wp-content/uploads/2014/03/Arkham-Knight2.jpg) no-repeat center center;
    background-size: cover;
    position: relative;
}
h2 {
    color: white;
    vertical-align: center;
    position: absolute;
    bottom: 20px;
    left: 20px;
}
<div class="review">
    <div class="review-head">
        <h2> Batman Arkham Knight Review </h2>
    </div>
</div>

Upvotes: 3

Alex Char
Alex Char

Reputation: 33218

Change h2 to this:

h2 {
    color: white;
    position:absolute;
    bottom: 0px;
}

My suggestion is to use a div element with id or class to achieve that. E.g <div class="imgTextFooter" ></div> and apply here the style you want :)

Forgot to add that you have to add position:relative to .review-head

fiddle

Upvotes: 2

Ngz
Ngz

Reputation: 180

Add

position: relative;

to the parent div.

Add 

position: absolute; 
bottom: 0;

to the h2.

Upvotes: 1

Related Questions