How to make hyperlink for a background image?

Tags: html,css,drupal-7

Problem :

I am displaying a list of files on a page, at the end of the each file nameI have used one background image(cross mark). But I need that image should be clickable element. When I click on the image it should delete from the given path.For more details, see the below image

enter image description here

How can I achieve that, give some suggestion. Below html and css code I am using to display that image

 $data .= '<div class = "public-file-names" ><a href="'.$path .'xmluploads/'. $foldnames .'/'. $filenames.'" target="_blank" download>' ."--". $filenames .'</a><br></div>';

div.public-file-names {

     background: transparent url("../images/close-cross.jpg") no-repeat scroll right center;
     font-size: 14px;
     margin: 10px 0;

Solution :

You need to add another anchor tag for the delete button, then move the background image to the tag.

$data .= '<div class = "public-file-names" ><a href="'.$path .'xmluploads/'. $foldnames .'/'. $filenames.'" target="_blank" download>' ."--". $filenames .'</a><br><a href="" class="delete-button"></a></div>';

.public-file-names {
     font-size: 14px;
     margin: 10px 0;

.delete-button {
    float: right;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: transparent url("../images/close-cross.jpg") no-repeat scroll right center;

    CSS Howto..

    How to truncate text in select box using CSS only

    html / css / pre / code: how to force carriage return

    How can I use CSS to vertically center the text in an anchor, within a LI?

    How to disable fixed header on Mobile with CSS

    How to place three div tags one below another?

    How to set bold only to first level list elements? [duplicate]

    How to jump to a tab position (or equivalent) in html or css

    How to change the color of table rows once ng-repeat executed

    How does Twitter put labels inside textboxes?

    Jquery how to get specific css values from css properties with stacked value options such as font-family

    How can I center a box in CSS?

    CSS/HTML menu not showing correctly

    Css: How to format and remove outlining borders of table on left and right side?

    How to do multiple class selectors in Stylus CSS pre-processor

    How to have an image overlap the edge of a div

    How to create a header that changes as you scroll down the page? [duplicate]

    How to make a vector background image in css instead of using jpg or png

    How to create dynamic business listings in wordpress [closed]

    How to fit in an image inside span tag when onclick?

    How do I load a CSS file with HTMLTextWriter

    How to get the navigation bar to align to the center

    How to delay the display of the background image in a div

    How to right and left align every alternate list item in html and css along with the bullets

    how to create two divs shapes to overlay each other

    How to load dynamic content (get, html, data) via jquery/css in Wordpress?

    How long can a webpage be?

    how to make “before” li is fixed at the bottom of li?

    How to hide a CSS media query from print? “not” logical operator does not work

    How to make vertical menu with emenu extension in Yii?

    How to put things in divs with true border