so... as the topic says how to make a clickable background image some people say this is impossible, other offered a decision here is the background image and it apear correctly body { background: #111 ; background-image:url(IMAGE_URL ); background-repeat:no-repeat; background-position:100% 0%; background-attachment: scroll; } #wrap { background: #EEE; width: 960px; margin: 10px auto 10px; padding: 0; position: relative; border: 10px solid #333; } Code (markup): but all attempts to make this (body)background clickable failed any help is appreciable
This is experimental, and is not guaranteed to work, but a solution is to add another element within the body that is clickable, such as an anchor. Like so: HTML: <body> <a class="clickme" href="#"></a> <div id="wrap"> test </div> </body> Code (markup): CSS: <style> body { [B]background: #111 url(IMAGE_URL) no-repeat 100% 0% scroll;[/B] /* Did you know you can combine all of this? */ [B]margin:0;[/B] /* this is just used as a reset */ } #wrap { background: #EEE; width: 960px; margin: 10px auto 10px; padding: 0; position: relative; border: 10px solid #333; } [B]a.clickme { position:absolute; height:100%; width:100%; background:#999; z-index:-1; top:0; left:0; /* This is the magic code; background color added to demonstrate effect */ }[/B] </style> Code (markup):
not working ...... its only change the color before background image and replace the position of the image and there is no clickable area
Here is the whole source of code I am using, it's working for me in Chrome and IE8. What browser are you using? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style> body { background: #111 url(IMAGE_URL) no-repeat 100% 0% scroll; margin:0; } #wrap { background: #EEE; width: 960px; margin: 10px auto 10px; padding: 0; position: relative; border: 10px solid #333; } a.clickme { position:absolute; height:100%; width:100%; background:#999; z-index:-1; top:0; left:0; } </style> </head> <body> <a class="clickme" href="#"></a> <div id="wrap"> test </div> </body> </html> Code (markup):
Hm, I gave answers yesterday but they are not here anymore??? Anyway, once again. I think it is only possible with a wrapper (height and width 100%). I am using jQuery clickable in some projects, maybe this script can help you in any way. http://jlix.net/extensions/jquery/clickable
Hi GWiz, first of all I'd like to thanks for you time trying to help great respect now... i've tryed the code in different browser(IE6, IE7, FF3.6) at all yes, there is a clickable area but there is no image have seen (try it) if i remove <a class="clickme" href="#"></a>, image is apear even tryed background-attachment: fixed btw: the blog under my nickname is the place i'd like to make this clickable background image
Your image isn't appearing because you need to remove background:#999; from the .clickme class that I created. Right now it's dark gray which is appearing OVER your background (proof of concept), if you remove the background color from my class, your background image should appear and will work as you want. I mentioned this in the comments.
i was wondering why this class do not work for me.... the trueth is that clickable area is under #wrap area in case it works like a charm but... not working as the clickable area is under(invisible) text in #wrap and yes, background image is apear, but it is unclickable
You might be missing some CSS code somewhere, as if you try out the code I provided above, it works fine for me. Please copy and paste all the code you are working with here, and we'll try to debug it.
ok here is 3 examples N1 working as the wrap zone has less text N2 still working, but the clickable zone is under the wrap(text) N3 not workink as the wrap has much text and is over image the code is the same, only defference is in text <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style> body { background: #111 ; background-repeat:no-repeat; background-position:100% 150px; background-attachment: scroll; width: 980px; color: #333; font-size: 12px; font-family: Arial, Tahoma, Verdana; margin: 0 auto 0; padding: 0; } #wrap { background: #EEE; width: 960px; margin: 10px auto 10px; padding: 0; position: relative; border: 10px solid #333; } a.clickme { position:absolute; height:100%; width:100%; background-image:url(http://www.eurobet.cc/images/football.jpg ); z-index:-1; top:0; left:0; background-attachment: fixed; } a, a:visited { color: #A91B33; text-decoration: none; } a:hover { color: #A91B33; text-decoration: underline; } a img { border-width: 0; } #topnavbar { background: #111; width: 960px; height: 30px; color: #FFF; margin: 0; padding: 0; } #topnavbar a, #topnavbar a:visited { font-size: 11px; font-weight: bold; color: #FFF; text-decoration: none; } #topnavbar a:hover { text-decoration: underline; } #topnavbar p { font-size: 11px; font-weight: bold; padding: 0; margin: 0; } .topnavbarleft { width: 530px; float: left; margin: 0; padding: 8px 0 0 10px; } .topnavbarright { width: 400px; float: right; margin: 0; padding: 7px 10px 0 0; text-transform: uppercase; text-align: right; } .topnavbarright a img { border: none; margin: 0 3px 3px 0; padding: 0; } #header { background: #111; width: 960px; height: 100px; color: #FFF; font-size: 11px; margin: 0; padding: 0; overflow: hidden; } #header-inner { background-position: left; background-repeat: no; } #header h1 { color: #FFF; font-size: 36px; font-family: Georgia, Times New Roman; font-weight: normal; margin: 0; padding: 15px 0 0 20px; text-decoration: none; } #header h1 a, #header h1 a:visited { color: #FFF; font-size: 36px; font-family: Georgia, Times New Roman; font-weight: normal; margin: 0; padding: 0; text-decoration: none; } #header h1 a:hover { color: #FFF; text-decoration: none; } #header h3 { color: #A91B33; font-size: 16px; font-family: Arial, Tahoma, Verdana; font-weight: normal; margin: 0; padding: 0; } #header p { color: #FFF; padding: 0 0 5px 20px; margin: 0; line-height: 20px; } .headerleft { width: 460px; float: left; font-size: 14px; margin: 0; padding: 0; } .headerleft a img { border: none; margin: 0; padding: 0; } .headerright { width: 486px; float: right; margin: 0; padding: 18px 0 0; font-weight: bold; } .headerright a img { border: 1px solid #FFF; margin: 0 0 3px; padding: 0; } #header .description { color: #A91B33; font-size: 16px; font-family: Arial, Tahoma, Verdana; font-weight: normal; margin-left: 25px; padding: 0; } #NavbarMenu { background: #555; width: 960px; height: 35px; font-size: 12px; font-family: Arial, Tahoma, Verdana; color: #FFF; font-weight: bold; margin: 0; padding: 0; } #NavbarMenuleft { width: 680px; float: left; margin: 0; padding: 0; } #NavbarMenuright { width: 280px; font-size: 11px; float: right; margin: 0; padding: 6px 0 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { color: #FFF; display: block; font-size: 16px; font-family: Georgia, Times New Roman; font-weight: normal; text-transform: lowercase; margin: 0; padding: 9px 15px 8px; } #nav li a:hover, #nav li a:active { background: #555 ; color: #FFF; margin: 0; padding: 9px 15px 8px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #555; width: 150px; color: #FFF; font-size: 14px; font-family: Georgia, Times New Roman; font-weight: normal; text-transform: lowercase; float: none; margin: 0; padding: 7px 10px; border-bottom: 1px solid #FFF; border-left: 1px solid #FFF; border-right: 1px solid #FFF; } #nav li li a:hover, #nav li li a:active { background: #777; color: #FFF; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; } #searchform { margin: 0; padding: 0; overflow: hidden; display: inline; } #searchbox { background: #EEE !important; width: 220px; color: #202020; font-size: 12px; font-family: Georgia, Times New Roman, Trebuchet MS; font-weight: normal; margin: 0; padding: 4px 0 3px 5px; border-top: 1px solid #DDD; border-right: 1px solid #666; border-left: 1px solid #DDD; border-bottom: 1px solid #666; display: inline; } #searchbutton { background: #555 ; color: #FFF; font-size: 11px; font-family: Georgia, Times New Roman, Trebuchet MS; margin: 0 0 0 5px; padding: 3px 3px 2px; font-weight: bold; border-top: 1px solid #DDD; border-right: 1px solid #666; border-left: 1px solid #DDD; border-bottom: 1px solid #666; } #subscribe { margin: 0; padding: 5px 0 0; overflow: hidden; } #subbox { background: #EEE !important; width: 200px; color: #202020; font-size: 12px; font-family: Georgia, Times New Roman, Trebuchet MS; font-weight: normal; margin: 5px 0 0; padding: 3px 0 3px 5px; border-top: 1px solid #666; border-right: 1px solid #DDD; border-left: 1px solid #666; border-bottom: 1px solid #DDD; display: inline; } #subbutton { background: #555 ; color: #FFF; font-size: 11px; font-family: Georgia, Times New Roman, Trebuchet MS; margin: 0 0 0 7px; padding: 3px 3px 2px; font-weight: bold; border-top: 1px solid #DDD; border-right: 1px solid #666; border-left: 1px solid #DDD; border-bottom: 1px solid #666; } #name, #email, #url { background: #EEE !important; width: 250px; color: #202020; font-size: 12px; font-weight: normal; margin: 5px 0 0; padding: 3px 0 3px 5px; border-top: 1px solid #666; border-right: 1px solid #DDD; border-left: 1px solid #666; border-bottom: 1px solid #DDD; display: inline; } #submit { background: #7B7B7B ; color: #FFF; font-size: 11px; font-family: Arial, Tahoma, Verdana; margin: 0; padding: 3px 3px 2px; font-weight: bold; border-top: 1px solid #DDD; border-right: 1px solid #666; border-left: 1px solid #DDD; border-bottom: 1px solid #666; } #words { background: #EEE; width: 460px; color: #202020; font-size: 12px; font-weight: normal; margin: 5px 0 0; padding: 3px 0 3px 5px; border-top: 1px solid #666; border-right: 1px solid #DDD; border-left: 1px solid #666; border-bottom: 1px solid #DDD; display: inline; } #subnavbar { background: #666; width: 960px; height: 24px; color: #FFF; margin: 0; padding: 0; } #subnav { margin: 0; padding: 0; } #subnav ul { float: left; list-style: none; margin: 0; padding: 0; } #subnav li { list-style: none; margin: 0; padding: 0; } #subnav li a, #subnav li a:link, #subnav li a:visited { color: #FFF; display: block; font-size: 10px; font-weight: bold; text-transform: uppercase; margin: 0 5px 0 0; padding: 6px 13px; } #subnav li a:hover, #subnav li a:active { background: #888; color: #FFF; display: block; text-decoration: none; margin: 0 5px 0 0; padding: 6px 13px; } #subnav li li a, #subnav li li a:link, #subnav li li a:visited { background: #666; width: 140px; float: none; margin: 0; padding: 6px 10px; border-bottom: 1px solid #FFF; border-left: 1px solid #FFF; border-right: 1px solid #FFF; } #subnav li li a:hover, #subnav li li a:active { background: #888; margin: 0; padding: 6px 10px; } #subnav li { float: left; padding: 0; } #subnav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 160px; margin: 0; padding: 0; } #subnav li ul a { width: 140px; } #subnav li ul ul { margin: -25px 0 0 161px; } #subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul { left: -999em; } #subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul { left: auto; } #subnav li:hover, #subnav li.sfhover { position: static; } #outer-wrapper { width: 940px; margin: 0 auto 0; padding: 10px 0 0; line-height: 18px; } #main-wrapper { float: left; width: 600px; margin: 0; padding: 0 0 20px; } #sidebar-wrapper { float: right; width: 320px; margin: 0; padding: 0 0 10px; display: inline; } #midsidebar-wrapper { width: 320px; float: right; overflow: hidden; } #lsidebar { background: #FFF top no-repeat; float: left; width: 150px; margin: 0; padding: 10px 10px 0; border: 1px solid #DDD; display: inline; } #rsidebar { background: #FFF top no-repeat; float: right; width: 120px; margin: 0; padding: 10px 10px 0; border: 1px solid #DDD; display: inline; } h2.date-header { margin: 1.5em 0 .5em; display: none; } .post { background: #FFF top no-repeat; float: left; width: 590px; margin: 0 0 10px; padding: 10px; border: 1px solid #DDD; } .post h3 { color: #444; font-size: 22px; font-family: Georgia, Times New Roman; font-weight: normal; margin: 0 0 5px; padding: 10px 0 0; } .post h3 a, #content h1 a:visited { color: #444; font-size: 22px; font-family: Georgia, Times New Roman; font-weight: normal; margin: 0 0 5px; padding: 10px 0 0; } .post h3 a:hover { color: #A91B33; text-decoration: none; } .post-body { margin: 0 0 .75em; line-height: 1.6em; } .post-body blockquote { line-height: 1.3em; } .comment-link { margin-left: .6em; } .post img { padding: 10px; } .post blockquote { background: #E8E8E8; margin: 0 25px 15px; padding: 10px 20px 0 15px; border-top: 1px solid #DDD; border-right: 1px solid #666; border-left: 1px solid #DDD; border-bottom: 1px solid #666; } .post blockquote p { margin: 0; padding: 0 0 15px; } .gapad { background: #FFF top no-repeat; float: left; width: 590px; margin: 0 0 10px; padding: 10px; border: 1px solid #DDD; } .comments { background: #FFF top no-repeat; float: left; width: 590px; margin: 0 0 10px; padding: 10px; border: 1px solid #DDD; } #comments h4 { color: #A91B33; font-size: 22px; font-family: Georgia, Times New Roman; font-weight: normal; margin: 0 0 20px; padding: 10px 0 0; } #comments-block { width: 580px; float: left; padding: 0; margin: 0; } #comments-block .comment-author { margin: .5em 0; font-weight: bold; } #comments-block .comment-body { margin: .25em 0 10px; padding-left: 20px; } #comments-block .comment-footer { margin: -.25em 0 2em; line-height: 1.4em; text-transform: uppercase; letter-spacing: .1em; border: 1px solid #DDD; } #comments-block .comment-body p { margin: 0 0 .75em; } .deleted-comment { font-style: italic; color: gray; } #blog-pager-newer-link { float: left; display:none; } #blog-pager-older-link { float: right; display:none; } #blog-pager { text-align: center; display:none; } .feed-links { clear: both; line-height: 2.5em; display:none; } .sidebar { color: #666; line-height: 1.5em; } .sidebar h2, .rsidebar h2, .lsidebar h2 { background: #333 ; color: #FFF; font-size: 11px; font-family: Arial, Tahoma, Verdana; font-weight: bold; text-transform: uppercase; margin: 0 0 10px; padding: 3px 0 3px 7px; } #sidebar p { margin: 0; padding: 0 0 0 45px; } #sidebar a img { border: none; margin: 0; padding: 0; } .sidebar ul, .rsidebar ul, .lsidebar ul { list-style-type: none; margin: 0; padding: 0; } .sidebar ul li, .rsidebar ul li, .lsidebar ul li { background: #FFF no-repeat; list-style-type: none; margin: 0 0 5px; padding-left: 20px; } .sidebar .widget { background: #FFF top no-repeat; float: left; width: 300px; margin: 0 0 10px; padding: 10px; border: 1px solid #DDD; } .sidebar .widget, .main .widget { margin: 0 0 1.5em; padding: 0 0 1.5em; } .sidebar .widget { background: #FFF top no-repeat; float: left; width: 300px; margin: 0 0 10px; padding: 10px; border: 1px solid #DDD; } .main .Blog { border-bottom-width: 0; } #footer { width: 660px; clear: both; margin: 0 auto; padding-top: 15px; line-height: 1.6em; text-transform: uppercase; letter-spacing: .1em; text-align: center; } #credits { background: #93BBBC ; width: 960px; height: 30px; margin: 0; padding: 0; text-align: center; } #credits p { color: #FFF; font-size: 11px; font-family: Arial, Tahoma, Verdana; margin: 0; padding: 9px 0 0; } #credits a, #footer a:visited { color: #FFF; text-decoration: none; } #credits a:hover { color: #FFF; text-decoration: underline; } </style> </head> <body> <a class="clickme" href="#"></a> <div id="wrap"> test </div> </body> </html> Code (markup):
I see the problem. It occurs in Firefox and IE, chrome seems to be fine. I will look into it and report back later tonight with a solution. I believe it has something to do with z-index.
Simple solution: Remove any reference to z-index from #wrap and .clickme and it should be fixed. Either that or add a z-index to both of them, same result.