» » Responsive Clickable Image Overlay Tutorial

Responsive Clickable Image Overlay Tutorial

posted in: WordPress | 0

I recently created an ad page for a client that required a background image with an overlaid clickable image button that was linked to another page.  This is normally easy to do if you have a fixed website theme, but for responsive themes (today’s norm), it’s a bit trickier.  It may look great in full screen mode, but as you shrink down your browser’s window, you’ll notice that the button doesn’t shrink with the background image.  Also, the button will move all over the place, not staying in a fixed position relative to the background image. If you want to check out the page itself for reference, go here:   http://cincinnatitemple.com/golf_fundraiser/

I’ll do my best to break down each step I took to achieve this:

HTML

1
2
3
<div class="BUTTON-CLASSNAME"><a href="PAGE-2"><img class="aligncenter" src="BUTTON-IMAGE" alt="BUTTON-NAME" width="BUTTON-WIDTH" height="BUTTON-HEIGHT" border="0" /></a></div>

<div class="BACKGROUNDIMAGE-CLASSNAME"><p style="text-align: center;"><img src="BACKGROUND-IMAGE" width="BACKGROUNDIMAGE-WIDTH" height="BACKGROUNDIMAGE-HEIGHT" /></p></div>

CSS

1
2
3
4
5
6
7
8
.BUTTON-CLASSNAME {
    position:absolute;
    margin-top:10%;
    margin-left:33.33%;
    margin-right:33.33%;
    max-width:600px;
    min-width:0px;
}

WordPress Rocks! If you can dream it, I can create it!
Like this article? Please click below to share it. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *