Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ full page background image with CSS.

Posted by: kl2017 Oct 30 2017, 08:42 PM

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>

Posted by: pandy Oct 30 2017, 10:14 PM

In your case inside DIV.bg. But why do you use a 100% high DIV instead of applying the background to BODY?

Posted by: Christian J Oct 31 2017, 04:53 AM

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.

Posted by: pandy Oct 31 2017, 02:01 PM

Is the link supposed to cover the whole viewport?

Posted by: Christian J Oct 31 2017, 02:30 PM

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...

Posted by: pandy Nov 1 2017, 02:10 AM

It did?