Agrandar imagen de background segun resolucion usuario

jonysi_d · #1 (**permalink**) 10/12/2009, 10:06

Hola...

no se si se hace con Javascript, creo que si, pero quiero hacer lo siguiente:

tengo una imagen como backgraund de una web la cual quiero que dependiendo de la resolucion y la pantalla que tenga el usuario, quiero que la imagen se agrande o no.
Es con JavaScript ?? alguna sugerencia ???

jackson666 · #2 (**permalink**) 10/12/2009, 10:29

No basta con un simple width: 100% y un height: 100% y un background-image??? Y sino:

Código HTML:

<body onload="redim()">

<script language="javascript">
function redim(){
    var ancho=window.innerWidth;
    var alto=window.innerHeight;
    var img=document.getElementById("back");
    img.setAttribute("width",ancho);
    img.setAttribute("height",alto);
}

</script>

<div id="contenedor">
<img src="fondo.png" id="back" />
</div>

jonysi_d · #3 (**permalink**) 10/12/2009, 11:15

Cita:

Iniciado por jackson666

No basta con un simple width: 100% y un height: 100% y un background-image???

Quieres decir que con CSS tambien es possible hacerlo ???

jackson666 · #4 (**permalink**) 10/12/2009, 11:34

No se, no probee =P. A mi me gusta tirar codigo porq si jajaja!

deirdre · #5 (**permalink**) 10/12/2009, 18:42

Hola jonysi_d

No es necesario usar javascript para esto. Es suficiente con css.

Prueba esta aproximación y luego la adaptas a tu diseño:

Código HTML:

<!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>Fondo de imagen elastica</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	outline: 0;
}
html, body {
	width: 100%;
	height: 100%;
}
#contenedor {
	width: 100%;
	height: 100%;
	position: relative;
}
#contenido {
	position: relative;
	z-index: 2;
}
.fondo {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
}
</style>

</head>

<body>
<!-- colocar una imagen de fondo de página totalmente elástica: siempre ocupará el 100% del ancho y del alto de la pantalla -->
<!-- cuidado al usar este sistema porque puede deformar la imagen y sus proporciones -->
<!-- si se hace un "resize" del navegador se verá que la imagen se adpata al tamaño que adquiera el browser -->
<div id="contenedor">
		<img class="fondo" alt="" src="http://farm3.static.flickr.com/2409/1619616706_7ce674a13f_o.jpg" />
		<div id="contenido">
		<p>A partir de aquí el resto del contenido de mi página</p>
		</div>
</div>

</body>

</html>

Haz un copy-paste en un html limpio y lo pruebas.

Bye

jonysi_d · #6 (**permalink**) 11/12/2009, 03:08

Muy bien Deirdre..... muchas gracias, era lo que buscaba