background not clickable

Topics: Themes
Jul 1, 2012 at 11:43 AM
Edited Jul 1, 2012 at 11:45 AM

I tried to put a background clickable in my blog made with BlogEngine.NET 2.5.0.6 .

The link only works in Internet Explorer. The solution I tried is this:

  • putting a new div before the mainwrapper:

 

 <div id="sfondocliccabile">
 <a href="http://www.example.it" 
         target="_blank" shape="default">
     <img src="http://www.bruno.pacifici.name/themes/MetroLight/images/gifTrasparente.gif" 
         alt="asd" height="100px" width="100px" />
     </a>
  </div>

 

  • The related css is this:

 

#sfondocliccabile {
position:fixed;
top:0px;
left:0px;
  width:100%;
  height:100%;
background: url('images/examplebackground.jpg') no-repeat center top;
z-index: -1;
}

#sfondocliccabile a {
display:block;
width:100%;
height:100%;
}
#sfondocliccabile img {
  width:100%;
  height:100%;
}

Does anyone know how to make it fully working also in Chrome and Firefox ?

 Thanks

Jul 1, 2012 at 3:25 PM

OK I solved the problem. The theme is the MetroLight.

As you can see in the site.master before the MAINWRAPPER and after the <body> I wrote:

 

 <div id="sfondoCliccabile"><a href="http://www.example.it" 
         target="_blank" >
         <span >"http://www.example.it"</span>
     </a></div>

 

 

#sfondoCliccabile 
{
    z-index: -1;
}

#sfondoCliccabile a 
{
    background: url('images/examplebackground.jpg') no-repeat center top ;
    position: fixed;
    padding: 0px;
    margin: 0px;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

#sfondoCliccabile span {
display: none;
}

#wrapper {
	margin:0 auto;
	position:relative;
	width:960px;
	background-color: #FFF;
	padding: 30px;

}

the solution was to put the position:relative attribute in the wrapper div

 

Best regard,

Bruno Pacifici alias Mrvirtual