Link image in CSS

Report · Oct 10, 2020

I have created a website using an online tutorial
The tutorial places an image in css and appears properly in the browser.
However, I want to make the image clickable, linking to my contact page and unaware of how to write the code within css to make this happen.
The is the code in css for the image
background: url('../../images/layout/free-consultation.png') center top no-repeat;

Report · Oct 11, 2020

You cant make a background image directly linkable. You will need to place/position a link, using an anchor tag, which overlays the background image.

If you have link to your current page where we can see your code someone will most likely be able to suggest a suitable solution.

Report · Oct 11, 2020

CSS background images are merely for decoration. They don't DO anything and disappear when the page is printed. For interactive images, links, etc... put them in your HTML markup instead of the CSS. Or use a separate foreground image for links.

<a href="index.html"><img src="my_image.jpg" alt="description" title="Link to home page"></a>

In order to build websites, you must have a working knowledge of HTML, CSS and to some extent JavaScript code. Without understanding code, it' unlikely you'll get the results you're hoping for. Read the chapters, do the code exercises and take quizzes at the end.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Oct 14, 2020

although I fully agree with the two opinions posted by OS and Nancy, you can, if necessary and although it presents some constraints make css background images that are clickable and printable

just give it a try

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS background image, clikable and printable</title>
    <style>
        .image-bg {
            background-image:url(https://via.placeholder.com/150);
            display:inline-block;
            width:150px; /* you can make it responsive if necessary */
            height:150px;
        }
        Media@mercycity.church print {
            .image-bg {
                -webkit-print-color-adjust: exact !important; /*Chrome, Safari */
                color-adjust: exact !important;  /*Firefox*/
              }
        }
    </style>
</head>

<body>
    <a href="#" class="image-bg"></a>
</body>
</html>

Adobe Community

Link image in CSS