All geek questions in one place

How to add a hyperlink to the background image?

I would like to add a hyperlink to this background image. Should I create a new class in the stylesheet? (When I tried to call a new class, the image disappeared).

body{
  background-image:url('http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg');
  background-repeat:no-repeat;
  background-attachment:fixed;
  line-height:20px; font-size:14px;
  font-family:"Trebuchet MS";
  margin:0
}

EDIT: now there are spaces above and below (created by the new div class?)

+3
source share
5 answers

You can put a div behind everything on the page, give it a background image, and then add an onclick handler to that div. But you cannot hyperlink to the background image.

You will need to do something like:

<body>
    <div id='background' onclick='window.location.href="mynewurl"'>
        <!-- Rest of page goes here -->
    </div>
</body>

Also, add a cursor: pointerdiv to css for the background so people know its link.

+3
source

background-image body. .

, img? :

<a href="#"><img src="http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg" alt="Image" /></a>

, , .

+4

, , , , . , , " " , . , -, .

  • gif ,
  • : <a href="#" class="bkg-link1"><img src="blank.gif" alt="Link Location" /></a>
  • CSS, .

, , , , , . , alt .

, , "" gif, , .

+1

HTML-. , <body>, .

** ** , HTML ( ), jquery :

$(document).ready(function(){
    $("body").click(function(){
        window.location='http://www.yoururl.com';
    });
});
0

onClick , , SEO, .

You can only do this with HTML / CSS:

<style>
   .background-div {
     background-image:url("/path/to/image.jpg");
     position:relative;
   }
   .href:after {
     position:absolute;
     top:0;
     bottom:0;
     left:0;
     right:0;
     content:"";
    }
</style>
<body>
  <div class="background-div">
   <a href="/a/url" class="href"></a>
  </div>
</body>

In this case, relative positioning on the background-div will contain the link contained only for that div, and by adding a pseudo-element to the link, you have the freedom to still add text to the link (if necessary), expanding the radius of the click on the entire background div .

0
source

Source: https://habr.com/ru/post/1766214/

More articles:


All Articles