How to make background images clickable (javascript or css)


Tags: javascript,jquery,css,background-image,clickable

Problem :

Please take a look this fiddle

How to make the background image clickable? When click "Take the survey" will go to a new page.

<div style="height:300px;width:300px;border-style:solid;border-width:5px;background-image:url('http://cdn.survey.io/embed/1.0/right_top_blue.png'); background-repeat:no-repeat;background-position:right top;">

By default, the background-image property repeats an image both horizontally and vertically.

</div>

Javascript or CSS are all preferred.

Edit: I don't want to use image float to right corner.



Solution :

You shouldn't.

What if a user has styles turned off, or is using a screen reader? They should be able to take the survey as well.

div{position:relative;}
a {display:block; width:120px; height:120px;
    position:absolute;
    top:0; right:0;
    text-indent:-9999px;

    background-image:url('http://cdn.survey.io/embed/1.0/right_top_blue.png'); 
    background-repeat:no-repeat;background-position:right top;}

Demo


    CSS Howto..

    Horizontal
      navigation - how to vertical align contents of

    How to keep styles after animation?

    how to make a timeline using html, css, javascript?

    How to control the HTML area to the right?

    How to add shadow to reverse c radial gradient only at the edges?

    How to select where my overflow ellipsis starts

    How to dynamically modify CSS class using Javascript / jQuery with wrapper?

    How to combine two css3 gradients ?

    How can you grab elements in dom and apply different css without id?

    How can I shift up a div and all divs that follow it?

    How to specify a html tag on a LESS CSS nested class?

    How can I make this menu using only anchor tag and css Not using ul and li?

    How to set vertical alignmetn of text in bootstrap select control?

    How to create a card flip effect on DIV using javascript

    How to Center Rotated text with CSS

    How to apply a class in the current slide using bxslider?

    How to disable temporary cursor with javascript?

    How to horizontally scroll an inner div with text wrapping

    show html element before sending ajax sync request

    How can I have a table with a set height but auto height cells

    How to hide elements with css using checkboxes: different outputs according to element id or class?

    How to style unordered lists in CSS as comma separated text

    How to implement padding-free sprites in css?

    how to make css for work for different mobile sites

    How to create an infinite easing in and out CSS animation loop?

    How to fix header cannot sticky in wordpress?

    How remove space on around content (css)?

    how to show background image(multiple) if out of current div

    How to eliminate scroll text jumps

    How to select a div with nth-child()?