Help: How make a background image clickable

I setup a background image on the site with this CSS code:

body { background:#2f2f2e url(img/photo.jpg) top center no-repeat; margin-top: 200px; color:#333; font: 12px Arial, Helvetica, sans-serif;}

Two questions:

  1. How do I turn that background image into an a href, a clickable image?
  2. The image is set at 1280px and it looks fine on widescreen monitors, but on non-wide, it doesn’t show the entire image. Suggestions?

Thank you.

Two answers:

  1. Can you use the painted beans on your coffee mug to make coffee?
  2. When you look at your TV sitting on the couch, at a reasonable distance from it, you can see the whole picture. But when you stick your face on the TV screen, literally, you can only see a part of it. Can you shrink the TV so that you’ll see the whole picture in the later?

Noonnope means, essentially you cannot make it click-able because it is not markup it’s CSS. Also if you have an image of 1280px it will remain 1280px width as it’s a fixed width so will not resize like a percentage.

  1. How do I turn that background image into an a href, a clickable image?

You don’t, however it is possible to set an anchor tag directly over an image and hide the anchor text or have no anchor text at all. Not adviseable, but if you’ve seen “clickable” background images, that’s how they did it.

  1. The image is set at 1280px and it looks fine on widescreen monitors, but on non-wide, it doesn’t show the entire image. Suggestions?

If it was an HTML <img> tag, you have the ability (limited) to scale it. Background images however do not scale.

What I have seen people do for scaleable background images (and this is not a good thing to do, but it can be done) is they have an image as the first child (though it must be inside a block element, cannot sit alone directly inside the body tag) who is set to width and height 100%. It will have to be absolutely positioned so it can do that, the body will need a 100% height and then the child after the image, the one who has the content, will need a min-height of 100% and needs to be “positioned” (position: relative will do) so the abso-po’d image doesn’t cover it up.

Be aware that that’s a big file, and even those on small screens are downloading that whole big image, even though they don’t see it at its original dimensions.

Also screens are not all square or rectangular in the same dimensions: there are many different resolutions, so your image will be stretched and squished on many screens. You can’t do anything about that.

Well, there’s a whole different tack you could take: make the image a background image on the first child of the body (a div or something) and then set that div’s width to the width of the image. Users will get a scrollbar on smaller monitors, which means they can scroll to the right to see the rest of the image.

If you’re making this clickable though, I’m not sure what your point/goal is.

I found this on another website. It sets the “background” img width to 100% which maintains the bg image’s aspect ratio and so your bg is not distorted as the browser window size changes. The only thing I added is wrapping the img in an <a> tag to make it clickable.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xht...ansitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">

            body {
                margin:0;
                padding:0;
                background-color: green;
            }
            #wrapper {
                position:relative;
            }
            #wrapper #bgContainer {
                position:absolute;
                width: 100%;
                top:0; left:0;
            }
            #wrapper #bgContainer img {
                width: 100%;
                border: none
            }
            #content {
                overflow:hidden;
                position:relative;
                width: 800px;
                margin:0 auto;
            }

        </style>
    </head>
    <body>

        <div id="wrapper">
            <div id="bgContainer">
                <a href="#">
                    <img src="pic1.jpg" id="logo" alt="logo" />
                </a>
            </div>
            <div id="content">
                <h2>Welcome!</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis magna sed urna ultrices aliquet.
                    Sed tempor, ante et semper molestie, metus metus ultricies arcu, ornare iaculis tellus justo at dui. Ut
                    tempor commodo elit, fringilla malesuada sapien suscipit et. Vestibulum bibendum dapibus porttitor. Proin
                    condimentum volutpat ultrices. Ut in aliquam ipsum. Donec tempor placerat feugiat. Mauris in elementum mi.
                    Sed lobortis congue est, sed rhoncus justo imperdiet et. Nunc malesuada aliquam lobortis. Morbi sit amet sapien
                    ac urna hendrerit varius. Sed luctus cursus enim. Nulla vestibulum lacus quis lectus aliquet scelerisque. Sed
                    vulputate accumsan massa convallis vehicula. Suspendisse eget imperdiet arcu. Pellentesque nisi elit, mollis
                    in aliquam eget, accumsan id diam. </p>
            </div>
        </div>
    </body>
</html>

If you are scaling images in IE then you might be interested in this:

img{-ms-interpolation-mode:bicubic;}

  1. The image is set at 1280px and it looks fine on widescreen monitors, but on non-wide, it doesn’t show the entire image. Suggestions?

Can’t you just center the image in the background (background-position:50% 0) so that the best part of the image is visible at smaller sizes.

I would say that those large background images usually slow the site down to a crawl so be careful. It makes scrolling choppy in some browsers and of course 1280px image is likely to be a bigger file size than the whole rest of the site.