Highlighted

Link image in CSS

New Here ,
Oct 10, 2020

Copy link to clipboard

Copied

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;

Views

47

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Link image in CSS

New Here ,
Oct 10, 2020

Copy link to clipboard

Copied

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;

Views

48

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 10, 2020 0
LEGEND ,
Oct 11, 2020

Copy link to clipboard

Copied

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.

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 11, 2020 0
Adobe Community Professional ,
Oct 11, 2020

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 11, 2020 0
Adobe Community Professional ,
Oct 14, 2020

Copy link to clipboard

Copied

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 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>

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2020 1