Do you need to turn a background image into a clickable link?

So a couple of days ago a client asked me to make an image he posted on his WordPress blog bigger. Easy, right? WRONG! The fastest and easiest way to accomplish this was to just remove the code that made posted images into thumbnails, but we wanted to make this specific image bigger without affecting anything else on the site. Still easy, right? WRONG!

While I am not a website developer I know the basics well (HTML and CSS) and I can edit PHP without messing up a website, so maybe this might have been an easier fix to someone else. My first thought was to disable the class that automatically resized the images; my code wouldn’t work. Next, was to try the obvious and place the image into a new div and class and hopefully that would override the height and weight. It wouldn’t work!

I went into the “interwebs” and found a similar post with 3 possible solutions … I tried two, one using javascript, and that didn’t work either! I started to tell myself, “This is why you stopped offering web services! This is taking too long, what am I doing wrong? Damn it!” But, I had to figure it out because if I didn’t I wouldn’t stop thinking about it. “How hard could it be? Why the hell is nothing overriding this damn, little CSS class, cr***, ******!” <— Actual thoughts.

And, then BOOM! Someone suggested in the forum, “Well, why don’t you just make the image the background in a div?” Many people angry at his suggestion: “People need to stop suggesting divs to solve every little problem, blah blah, angry, passionate comment, etc.” But, I was like interesting … I tried it … AND IT WORKED! I was like, finally! Then I remembered the client wanted the image to link to a page and I was like, “Damn …”

But, hey, easy solution thanks to Ran.ge, check it out! His CSS Trick worked perfectly for my situation.


Here is THE SOLUTION

It is super easy! First, start by creating a regular text link with an id so we can style it.

‘Elo Mate

And, that’s all for the HTML part! Now, let’s start on our CSS. Add the background image. It should now look like the example below:
‘Elo Mate

Now, to hide the text we will be using “text-indent”, genius!
‘Elo Mate

And, finally, to finish styling our background image. I resized the background image, added a border and a bit of padding. See below:

‘Elo Mate

I hope you find this helpful now or in the future. Check out Ran.ge for a more detailed article on this super easy CSS trick!