How to put a text and button inside an image

Back>

If you want to make your blogger post looks special, putting a hero image with text and button like this example is a easy.

First you need to upload an image to blogger post.
In Compose tab, click the Insert Image icon between Link and the video icon, then follow the procedure to upload the image.
Once the image is uploaded, click the THML tab.
copy the whole content,
which is a html code wrapped inside a div with class="separator" like these:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfoZUjgdOBsUVLMtEMY-W-ejoLDIzMIzlP5PokTOqTnidVED6l5yuAmQs5nDIPIcM6p8DuqZotL9sxVAlpeyJEpD6-5caBMdR8tMEPNUwt_-UR_rAdoq2Ai2BWTkybXGv2Jma806KSdCTu/s1600/Screen+Shot+2017-06-14+at+8.58.36+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="519" data-original-width="716" height="231" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfoZUjgdOBsUVLMtEMY-W-ejoLDIzMIzlP5PokTOqTnidVED6l5yuAmQs5nDIPIcM6p8DuqZotL9sxVAlpeyJEpD6-5caBMdR8tMEPNUwt_-UR_rAdoq2Ai2BWTkybXGv2Jma806KSdCTu/s320/Screen+Shot+2017-06-14+at+8.58.36+PM.png" width="320" /></a>
  </div>

wrap it inside the following template:

<style>


/* The hero image */
.hero-image {
 

    /* Set a specific height */
    height: 50%;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

/* Place text in the middle of the image */
.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

/*button*/
#id:link, #id:visited {
    background-color: green;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}


#id:hover, #id:active {
    background-color: Aqua;
}
</style>



<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfoZUjgdOBsUVLMtEMY-W-ejoLDIzMIzlP5PokTOqTnidVED6l5yuAmQs5nDIPIcM6p8DuqZotL9sxVAlpeyJEpD6-5caBMdR8tMEPNUwt_-UR_rAdoq2Ai2BWTkybXGv2Jma806KSdCTu/s1600/Screen+Shot+2017-06-14+at+8.58.36+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="519" data-original-width="716" height="231" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfoZUjgdOBsUVLMtEMY-W-ejoLDIzMIzlP5PokTOqTnidVED6l5yuAmQs5nDIPIcM6p8DuqZotL9sxVAlpeyJEpD6-5caBMdR8tMEPNUwt_-UR_rAdoq2Ai2BWTkybXGv2Jma806KSdCTu/s320/Screen+Shot+2017-06-14+at+8.58.36+PM.png" width="320" /></a>
  </div>
<div class="hero-text">
<h1>
Locked Collection</h1>
Your predecessor left a message<br />
<button onclick="alert('hello')">Read the message</button>
 </div>