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..

    How to change background color of readonly textbox in css

    How can I make Non-English quotation marks with a help of CSS? [closed]

    How to put six divs in two rows

    CSS: How to float 3 divs side by side for width:100% without messing up?

    how to create animated background like in smartprogress.do using js,css,html5 [closed]

    How to style menu in CSS to look like a button

    How can I use a data attribute to set a background-image in CSS?

    How can I request a CSS attribut in HtmlUnit?

    How do I make circles within a larger circle, and text within the center of all the circles, in CSS?

    How to detect CSS inheritance source?

    How to get all child elements using an xpath selector?

    How to combine HTML, CSS, and Javascript into an HTML code

    Grunt: how to concat a .CSS file onto my compiled .SCSS files?

    How to make a horizontal div scroll bar float like a fixed CSS div

    How to make a automatic image slider.?

    jQuery date picker show half day blocked

    How to make hovering over a class to trigger changes in other classes?

    HTML/CSS/JS: How to force browser to save password from a non-'password' type input?

    How To Highlight Show Active Tab In A Navbar-Fixed-Top

    Mini-map of HTML page sections shown as fixed anchors in viewport

    How to avoid ui-block div (jquery mobile) to overlap in internet explorer?

    Bootstrap modal: how to fade in, but immediately disappear on close

    CSS: How to theme only submit button (and not cancel or back button) - I´m using Drupal 6

    make the div (in css) to grow bottom-up? how?

    How to get element by its partial class name CSS

    How to display “a” to full of the line

    How to not repeat a CSS background gradient

    Css How to override

    [closed]

    How to get a css animation to transition quicker in keyframes

    How to customize CSS depending on (tinier) window size?