Full Background Simple

Una opción muy simple con igual resultado que ofrecen las librerías, los framewoks, etc… Con unas pocas líneas de código javascript, se puede conseguir ajustar una imagen al tamaño de la pantalla perfectamente. Es compatible con IExplorer, Firefox, Safari, Chrome, Opera, otros dispositivos, etc. El ejemplo:

<!DOCTYPE html>
<html lang=”es-ES”>
<head>
<meta http-equiv=”Content-Type” Content=”text/html; charset=ISO-8859-1″>
<meta http-equiv=”imagetoolbar” content=”no”>
<title>Full Background Image | jScript</title>
<style type=”text/css”>
<!–
*{
margin:0px;
padding:0px;
color:#FFFFFF;
font-size:100%;
font-family:sans-serif;
vertical-align:baseline;
text-rendering:optimizeLegibility;
}
img{
border:0px none;
-ms-interpolation-mode:bicubic;
image-rendering:optimizeQuality;
}
#bg{
position:fixed;
left:0px;
top:0px;
z-index:-100;
}
.bgw{
width:100%;
}
.bgh{
height:100%;
}
h4{
font-size:40px;
}
//–>
</style>
<scr/ipt language=”javascript” type=”text/javascript”>
<!– Copyleft 2006 – 2016, ScriptShow – scriptshow@hotmail.com –>
<!– Feel free to use if you leave this header intact! –>
<!–
function init(){
e=document.getElementById(“bg”);
r=e.width / e.height;
w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

if ((w / h) < r){e.className=”bgh”;}
else {e.className=”bgw”;}
e.onload=function(){init();}
}

window.onload=function(){init();}
window.onresize=function(){init();}
//–>
</scr/ipt>
</head>
<body>
<img id=”bg” src=”back.jpg” alt=””>
<h4>Text</h4>
<p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Ni siquiera los todopoderosos signos de puntuación dominan a los textos simulados; una vida, se puede decir, poco ortográfica. Pero un buen día, una pequeña línea de texto simulado, llamada Lorem Ipsum, decidió aventurarse y salir al vasto mundo de la gramática…</p>
<p>&nbsp;</p>
</body>
</html>

Anuncios
Full Background Simple

ScriptShow

Sitio Web con algunos experimentos y scripts propios, al margen de cualquier librería, framework, etc. Desarrollos útiles y sencillos, adaptables a cualquier Sitio sin complicaciones.

Website with some experiments and scripts themselves, independently of any library, framework, etc.. Develop useful and simple, adaptable to any site without complications.

ScriptShow WebSite

ScriptShow WebBlog

ScriptShow Descargas

ScriptShow Correo

ScriptShow