Imagen adaptada a pantalla completa

chabri · #1 (**permalink**) 25/01/2011, 17:24

Hola amigos, estuve mirando varios temas y no llego a la conclucion de como poner una imagen de fondo a pantalla completa, osea que se adapte a cualquier tipo de pantalla, tal como tienen en esta web

nose si esto lo puedo lograr con css o con jquery, la verda estuve investigando y no encuentro nada por ningun lado... saludos y gracias

jomaruro · #2 (**permalink**) 26/01/2011, 03:13

Hola:

Échale un vistazo a esta página.

Saludos.

buzu · #3 (**permalink**) 26/01/2011, 03:59

ya no recordaba CSS play. Ese hombre es un guru del CSS.

chabri · #4 (**permalink**) 27/01/2011, 08:33

eiii eso es lo que yo quieroooooooo!! lo voy a mirar con el "developer" a ver que saco, y en cuanto lo tenga lo subo aqui asi solucionamos este tema! graciassssss

chabri · #5 (**permalink**) 27/01/2011, 08:47

bueno aqui os dejo el codigo HTML con el CSS interno.

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls | CSS PLaY | 100% wide/high 'background' image emulation </title>
<meta name="Author" content="Stu Nicholls" />
<meta name="Keywords" content="cssplay, css play, Cascading, Style, Sheets, CSS1, CSS2, CSS, XHTML1.1, w3c, doing it with style, recommendations, opacity, box model, mozilla, opera, netscape, internet explorer, v6, v7.23, techniques, layout, three column, cutting edge, experimental, validation, validate, navigation, pop-up, pull-down, menus, tips, tricks, css mouseover, mouseovers, CSS experiments, CSS demonstrations" />
<meta name="Description" content="CSS ~ Cutting edge Cascading Style Sheets. Experiments in CSS" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<link rel="icon" href="../favicon.ico" type="image/ico" />

<style type="text/css">
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
text-align:left;
}
body {
font-family:verdana, arial, sans-serif;
font-size:76%;
}
#background{
position:absolute;
z-index:1;
width:100%;
height:100%;
}
</style>
</head>

<body>
<div>
<img id="background" src="1.png" alt="" title="" />
</div>
</body>

</html>

donde pone "<img id="background" src="1.png" alt="" title="" /> " ahi cambiamos la imagen a nuestro gusto.