The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> full page background image with CSS., Adding Hyperlink to full page background image with CSS.
kl2017
post Oct 30 2017, 08:42 PM
Post #1





Group: Members
Posts: 1
Joined: 30-October 17
Member No.: 26,520
How do I add a hyperlink URL to the image being used as a CSS full page background image?
Where does the url hyperlink get inserted? And what is the correct coding?

<!DOCTYPE html>
<html>
<head>
<style>
body, html {
height: 100%;
margin: 0;
}

.bg {
/* The image used */
background-image: url("index.png");

/* Full height */
height: 100%;

/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>

<div class="bg"></div>

</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 30 2017, 10:14 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,132
Joined: 9-August 06
Member No.: 6
In your case inside DIV.bg. But why do you use a 100% high DIV instead of applying the background to BODY?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 31 2017, 04:53 AM
Post #3


.
********

Group: WDG Moderators
Posts: 8,043
Joined: 10-August 06
Member No.: 7
It would be better to replace the DIV with a link, or put the link outside the DIV, otherwise the link won't cover the whole viewport.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 31 2017, 02:01 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,132
Joined: 9-August 06
Member No.: 6
Is the link supposed to cover the whole viewport?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 31 2017, 02:30 PM
Post #5


.
********

Group: WDG Moderators
Posts: 8,043
Joined: 10-August 06
Member No.: 7
It sounded like the OP wanted the BG image "inside" the link, so if the image covered the viewport, the link must do it too...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 1 2017, 02:10 AM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,132
Joined: 9-August 06
Member No.: 6
It did? unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 17th February 2019 - 09:58 PM
Invision Power Board © 2019  IPS, Inc.
Licensed to: HTMLHelp.com, LLC