Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I add a hyperlink to a background image?

Tags:

html

css

I'd like to add a hyperlink to this background image. Should I create a new class within the stylesheet? (When I attempted to call the 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's whitespace on the top and bottom (created by the new div class?)

like image 326
pmchrislee Avatar asked Apr 06 '26 05:04

pmchrislee


2 Answers

You're using a background-image on the body tag. Assigning a hyperlink to it is impossible.

Also, whats stopping you from using it in an img tag? This seems like a semantically valid thing to do:

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

But, if you must use it as a background image, than creating an additional class is the way to go.

like image 78
Russell Dias Avatar answered Apr 08 '26 20:04

Russell Dias


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

You'd have to do something like:

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

Also, add cursor: pointer to the css for the background div so people know it's a link.

like image 31
Skilldrick Avatar answered Apr 08 '26 22:04

Skilldrick



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!