Using list background image as link and not text as link

HTML & CSS
1

I would like to use the background image as the link and not the text on this list. I have tried to find out how to do it but no luck yet. Can anybody help. Thanks.

.iconlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.iconlist li.pdf {
    list-style: none;
    background-image: url(graphics/filetype-pdf-icon.png);
    background-repeat: no-repeat;
    background-position: 0 50%;
    padding: 3px 0 3px 30px;
    margin: .4em 0;
}

.iconlist li.doc {
    list-style: none;
    background-image: url(graphics/color-ms-word-icon.png);
    background-repeat: no-repeat;
    background-position: 0 50%;
    padding: 3px 0 3px 30px;
    margin: .4em 0;
}

.iconlist li.text {
    list-style: none;
    background-image: url(graphics/text-icon.png);
    background-repeat: no-repeat;
    background-position: 0 50%;
    padding: 3px 0 3px 30px;
    margin: .4em 0;
}

.iconlist li.htm {
    list-style: none;
    background-image: url(graphics/html-icon.png);
    background-repeat: no-repeat;
    background-position: 0 50%;
    padding: 3px 0 3px 30px;
    margin: .4em 0;
}

a:link {
    color: green;
    font-size:28px;
    text-decoration: none;
    background-color: #FFF;
}

a:visited {
}
        
a:hover {
    color: #B30000;
    background-color: #FFF;
}

a:active {
}

        </style>
    
    </head>

<body>

<ul class="iconlist">
    <li class="pdf"><a href="#">Milk</a></li>
    <li class="text"><a href="#">Eggs</a></li>
    <li class="htm"><a href="#">Cheese</a></li>
    <li class="doc"><a href="#">Vegetables</a></li>
    <li class="text"><a href="#">Fruit</a></li>
</ul>
2

See this page to include background images (samples only)

Sample menu

3

You can’t make a background image into a link. A background image is just that – background. It isn’t content. If you want an image to be a clickable link then you need to use the <img> tag to make it part of the content.

1 Like
4

I suppose you could add an event handler to the images container, but AFAIK this would be better handled with CSS alone.

I think what you’re wanting to do though is increase the link’s clickable area so that includes the same area as the li.

That is, you don’t want to make the background image clickable, but the li (which has a background image)

5

In which case, the easiest way is to put in your CSS
.iconlist a {display:block;}
That will make the the link fill the entire height and width of the <li>, which increases the clickable area and is generally best practice on that kind of menu.

6

As mentioned above set the anchor to display:block and then apply the images and padding to the anchor instead of the list.

You need a current doctype as the one you are using will put browsers into quirks mode which is a bad thing.

There’s no need to keep repeating the same rules over and over again when they are being applied to the same elements. The only thing different on your lists was the image so just change the image each time and set the rest of the styles just once.

Here’s an example:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<link rel="shortcut icon" href="graphics/favicon.png" type="image/x-icon" >
<style>
.iconlist {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size:28px;
}
.iconlist li{    margin: .4em 0;}
.iconlist li.pdf a {background-image: url(http://www.justinoakley.co.uk/newsystem/graphics/filetype-pdf-icon.png)}
.iconlist li.doc a{background-image: url(http://www.justinoakley.co.uk/newsystem/graphics/color-ms-word-icon.png)}
.iconlist li.text a{background-image: url(http://www.justinoakley.co.uk/newsystem/graphics/text-icon.png)}
.iconlist li.htm a{background-image: url(http://www.justinoakley.co.uk/newsystem/graphics/html-icon.png)}
.iconlist a{
    display:block;
    padding: 3px 0 3px 30px;
    background-repeat:no-repeat;
    background-position:0 50%;
    color:green;
    text-decoration: none;
}
.iconlist a:visited{color:green}
.iconlist a:hover{color: #B30000}


</style>
</head>
<body>
<ul class="iconlist">
        <li class="pdf"><a href="#">Milk</a></li>
        <li class="text"><a href="#">Eggs</a></li>
        <li class="htm"><a href="#">Cheese</a></li>
        <li class="doc"><a href="#">Vegetables</a></li>
        <li class="text"><a href="#">Fruit</a></li>
</ul>
</body>
</html>

Remember you should only include css in a css file and not html comments or any other html. Just css and css comments (/* */).

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.