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!
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.
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:
Now, to hide the text we will be using “text-indent”, genius!
And, finally, to finish styling our background image. I resized the background image, added a border and a bit of padding. See below:
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!