background image as link using css/jquery

Question

I have div containing the background image but i want to make that image as clickable and pointed to somewhere site. Is it possible to do this in css or jquery HTML:

<div id="logincontainer">
</div>

css :

  #loginContainer {
        -moz-border-bottom-colors: none;
            -moz-border-left-colors: none;
            -moz-border-right-colors: none;
            -moz-border-top-colors: none;
            background: url("http://s3.buysellads.com/1237708/176570-1371740695.gif") 
            no-repeat scroll center center #FF660D;  /*for example */
            border-color: #FFFFFF;
            border-image: none;
            border-right: medium solid #FFFFFF;
            border-style: none solid solid;
            border-width: medium;
            left: 0;
            margin-left: auto;
            margin-right: auto;
            position: fixed;
            min-height:200px;
            right: 0;
            top: 0;
            vertical-align: super;
            width: 100%;
            z-index: 9999999;
        }

Here is the http://jsfiddle.net/a39Va/16/

I am not sure is there is a way to make the background image as clickable which is pointed in div? Any suggestion would be great.

No, not without adding a <a> or using JavaScript and the click event. — j08691
– j08691, Commented Sep 6, 2013 at 15:21
Not sure if this is the correct solution, but it will work, have a look at this — Harry
– Harry, Commented Sep 6, 2013 at 15:21

Irfan TahirKheli · Accepted Answer · 2013-09-06 16:10:07Z

3

Just do something like:

<a href="whereYouWantToGo"><div id="loginContainer'></div></a>

Or you can do that as well via JavaScript and jQuery

$('#loginContainer').click(function(e) { <Whatever you want to do here> });

edited Sep 6, 2013 at 16:10

Irfan TahirKheli

3,6621 gold badge26 silver badges36 bronze badges

answered Sep 6, 2013 at 15:22

OscarG

3955 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

aaronburrows · Accepted Answer · 2013-09-06 15:25:31Z

1

You need to fix the z-index of the background element, and as others have said, add an anchor or a javascript action. Also, I added some sample of the rest of the content on the page. You need to see how the two interact with each other.

Here's an updated jsFiddle

HTML

<div id="loginContainer">
    <a href="#"></a>
</div>
<div class="content">
    <p>Something</p>
</div>

CSS

#loginContainer {
    background: url("http://s3.buysellads.com/1237708/176570-1371740695.gif") 
    no-repeat center #FF660D;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1;
}
#loginContainer a {
    display: block;
    height: 100%;
    width: 100%;
}
.content {
    z-index: 2;
    position: relative;
    width: 200px;
    height: 100px;
    background: #fff;
    margin: 30px 0 0 30px;
}

answered Sep 6, 2013 at 15:25

aaronburrows

1,0305 silver badges16 bronze badges

1 Comment

aaronburrows Over a year ago

As a side note, I don't like these sort of interactions. It is always frustrating to me when a web site makes the entire background, or a huge area of the page, clickable.

Milan and Friends · Accepted Answer · 2013-09-06 16:50:25Z

1

Here's a Fiddle

HTML

<div id="logincontainer" data-link="http://google.com"></div>

jQuery

$(function() {

  $('#logincontainer').hover(function() {

    var divLink = $(this).attr('data-link');

    $(this).wrap('<a href="' + divLink + '"></a>');

  });

});

edited Sep 6, 2013 at 16:50

answered Sep 6, 2013 at 16:29

Milan and Friends

5,6101 gold badge23 silver badges28 bronze badges

Comments

Milche Patern · Accepted Answer · 2013-09-06 16:59:44Z

1

Why not using an anchor ?

<a href="link" id="logincontainer">
</a>

i updated your jsFiddle

otherwise :

you can click on any element to behave like a link with jQuery.
you can surround your <div> in an anchor if you use the html5 <!DOCTYPE> ( Otherwise invalid )

edited Sep 6, 2013 at 16:59

answered Sep 6, 2013 at 15:21

Milche Patern

20.7k6 gold badges39 silver badges53 bronze badges

Collectives™ on Stack Overflow

background image as link using css/jquery

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related