zemiret zemiret - 1 month ago 7
CSS Question

Align h2 vertically bottom

I'm learning html and css starting with basics. I'm coding some simple site. I have a problem regarding aligning h2 vertically to bottom.

What I want to achieve is the header with background image (height 240px) that has a black bar with text: "love cucumbers" aligned to the bottom of it.
I've tried multiple solutions but they didn't work.

The text should be then "9 reasons why you should love cucumbers".

Here is relevant css and html:



.body {
clear: both;
width: 800px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

header {
height: 240px;
margin: 1em auto 3em;
background-image: url("https://media.mercola.com/ImageServer/Public/2014/August/cucumber-health-benefits-fb.jpg");
background-size: cover;
text-align: center;

font-family: 'Lobster', Georgia, Times, serif;
}

#caption {
width: 100%;
height: 70px;
line-height: 70px;

background: #191919;
color: #ffffff;
font-size: 2em;
letter-spacing: 1px;

border-bottom-left-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomleft: 15px;

border-bottom-right-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-moz-border-radius-bottomright: 15px;

<header class="body">
<h2 id="caption">Love cucumbers <3</h2>
</header>




Answer

You can make this using position relative for header and position absolute for h2. Please see the below updated code

.body {
    clear: both;
    width: 800px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

header {
    height: 240px;
    margin: 1em auto 3em;
    background-image: url("https://media.mercola.com/ImageServer/Public/2014/August/cucumber-health-benefits-fb.jpg");
    background-size: cover;
    text-align: center;

    font-family: 'Lobster', Georgia, Times, serif;
    position:relative;
}

#caption {
    width: 100%;
    height: 70px;
    line-height: 70px;

    background: #191919;
    color: #ffffff;
    font-size: 2em;
    letter-spacing: 1px;
    position:absolute;
    bottom:0px;
    margin-bottom:0px;
    border-bottom-left-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-bottomleft: 15px;

    border-bottom-right-radius: 15px;
    -webkit-border-bottom-right-radius: 15px;
    -moz-border-radius-bottomright: 15px; }
<header class="body">
	<h2 id="caption">Love cucumbers <3</h2>
</header>