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


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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: 9,628
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


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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: 9,628
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


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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

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

 



- Lo-Fi Version Time is now: 19th March 2024 - 12:44 AM