CODEWITHSUNDEEP
htmlcss
Anthosiast
Anthosiast

Reputation: 556

Full Background Image become clickable

I want to try full background become clickable. But It doesn't work at all.

Here is my HTML

<body>

<a href="home.php">
    <div id="clickable">
        <div id="context">
            <p> TESTING </p>
        </div>
    </div>
</a>

</body>

Here is my script for background to make it full background.

<script type="text/javascript">
        $(document).ready(function() {
        $("#background").ezBgResize({
            img : "assets/images/background.jpg",
            opacity : 1,
            center : true
        });
    });
</script>

Lastly, my CSS..

#clickable {
    top:0;
    left:0;
    right:0;
    bottom:0;
    border:1px solid white; 
}

I really don't want to put height on #clickable because if I add something, the background image would be screwed. And the problem is I want to make the whole page become clickable but it doesn't work at all. Any ideas?

Upvotes: 0

Views: 158

Answers (3)

skozz
skozz

Reputation: 2720

My approach:

http://jsfiddle.net/skozz/PyTVV/

CSS:

body {
    position: relative;
}
#background {
   position: absolute;
   z-index: 0;
}
#clickable {
    z-index: 1;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border:1px solid white; 
    position: absolute;
    color: white;
}

HMTL:

<body>

    <div id="background">
        <a href="http://google.com"><img src="http://crispme.com/wp-content/uploads/3498.jpg?pass"></a>
    </div>

<a href="home.php">
    <div id="clickable">
        <div id="context">
            <p> TESTING </p>
        </div>
    </div>
</a>

</body>

Upvotes: 3

defau1t
defau1t

Reputation: 10619

top left and right values for CSS come into picture only if position:relative or position:absolute; is specified. Otherwise there is no point in adding these without adding the position attribute.

Further you have whole page content inside an a tag, a tag is an inline level element, you would want it to make a block level element by floating it using float:left/right; or simple adding a{display:block;}

Upvotes: 1

Vangel Tzo
Vangel Tzo

Reputation: 9313

You could add position: absolute; to #clickable

#clickable {
    top:0;
    left:0;
    right:0;
    bottom:0;
    border:1px solid white;
    position: absolute;
}

An example : http://jsfiddle.net/Mhba6/

Upvotes: 2

Related Questions