Skip to main content
D
Darksteele007
Participant
October 11, 2020
Question

Link image in CSS

  • October 11, 2020
  • 3 replies
  • 4839 views

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;

    This topic has been closed for replies.

    3 replies

    B i r n o u
    B i r n o u
    Legend
    October 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;
        }
        @217338 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>

     

     

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      October 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
      O
      osgood_
      Legend
      October 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.

       

       

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices