después de darle varias vueltas creo que nos perdimos...
veamos el método que yo te di con el div y la imagen de fondo esta jamas cubrirá el 100% de alto ni ancho salvo que la pantalla o navegador sea de un tamaño inferior, inclusive en pantallas muy pequeñas parte de la imagen se perderá en las orillas.
con el método de @ZoroRoronoa puedes hacer que la imagen tome 100% de alto y ancho esta se deformara según las necesidades pero no tienes la facilidad de hacer que cambie la imagen con el hover
mi solución es usar javascript un ejemplo practico y funcional es este
Código HTML:
Ver original<!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" xml:lang="es-MX" lang="es-MX"> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta name="author" content="Ag666" /> <meta name="copyright" content="****" /> html,body{margin:0;padding:0;height:100%;}
<a href="index.html" title="Pagina intro"><img id="BgIntro" style="width:100%;height:100%;" src="http://s3.subirimagenes.com:81/fondosycapturas/previo/thump_6775110home.jpg" alt="Pagina intro" onmouseover="overimg();" onmouseout="overimg();" /></a> <script type="text/javascript"> function overimg(){
var Intro = document.getElementById('BgIntro');
if(Intro.src == 'http://s3.subirimagenes.com:81/fondosycapturas/previo/thump_6775110home.jpg'){
Intro.src = 'http://s2.subirimagenes.com/fondosycapturas/previo/thump_6775102homehover.jpg'
}
else{
Intro.src = 'http://s3.subirimagenes.com:81/fondosycapturas/previo/thump_6775110home.jpg'
}
}
has copy - paste en un documento nuevo y ábrelo en tu navegador, notese que la imagen se deforma si haces mas angosto el navegador, pero como tu deseas siempre cubrirá el 100% ancho y alto