5 replies to this topic

[Hans G.]

Hi folks! I'm building a Website in CSS and am pleased with everything I have done thus far. I have a background image on every page whose appearance is powered by a CSS file, which I call background.css, and sits in my css folder.

So the code on the html page reads: <link rel="stylesheet" type="text/css" href="css/background.css"/>

The code inside this file reads:

CODE

<!--
body { background-image: url(http://www.mywebsite.com/images/main-image.jpg); background-repeat: no-repeat; background-position: center top}
-->

I'm happy with everything, now I just need to make this background image linkable. I would like for people to click on this background image and have them go to the homepage, "mywebsite.com." How can I do this? Also, because this is a background image, it doesn't come out in print outs like all of the other images. Is there a way for a background image to show up in print outs?

[Ahmed]

You can have the impression of a background image link by doing the following:

In CSS

CODE

#logolink {
                 display: block;
                 height: 100px;
                 width: 200px;
                 background-image: url(logo.jpg);
         }

In HTML

CODE

<a id="logolink" href="http://whatever"></a>

I have used this before so it works but its something I learned while doing some research Here's the source

[Hans G.]

Thanks, Ahmed. I tried it and it worked except for the fact that it takes the image and throws it on the top left side of the page. I need it to be centered. Do you know how to center it using that code?

[MaKa]

Add the following to the CSS code to center the image:

CODE

background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;

Source: http://www.w3schools...ground-position

[Hans G.]

thanks.

[piskie]

Looks to me as though a Search Engine would see it as a "Hidden Link" against T&C