Ayuda para estirar Background

brychan · #1 (**permalink**) 07/09/2010, 09:26

Buenos días!
Necesito poner en el body de fondo una imagen que quede "estirada" para cualquier resolución, pero un "estirado" que no deforme la imagen. Es decir que al reducirse la resolución la imagen lo haga de tal manera que quede centrada y sin deformarse.

Les dejo un ejemplo que encontré:

http://kirkwhalum.com/

Muchas gracias!

Shaito · #2 (**permalink**) 08/09/2010, 09:43

Hola!

Pues el codigo en cuestión es este:

Código HTML:

Ver original<div style="position:absolute; width:100%; height:100%; margin:0px; padding:0px; left:0px; 
right:0px; z-index: -9999; "><img style="width="100%" height="100%" 
src="http://kirkwhalum.com/images/rotate/rotate.php"></div>

Cambia la dirección de la imagen:

Código HTML:

Ver original<img style="width="100%" height="100%" 
src="Has de cambiar esto para poner la imagen que tu quieras">

TheDark03 · #3 (**permalink**) 08/09/2010, 10:11

Hola, brychan cuando veas algo que desconoces siempre esta el click derecho ver código fuente... y te da una idea de lo que han hecho y como lo han hecho para asi poder imitarlo...

te dejo un ejemplo:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>by TheDark03</title>
<style>
html {
height : 100%;
}
body {
height:100%;
}
img{border:none;}
img.background{min-height:100%;min-width:1024px;width:100%;position:fixed;top: 0;left: 0;}
        
#wrapper{position:relative;width:1024px;height:1024px;border:1px solid #FF0000;margin: 0 auto;}
</style>
</head>
 
<body>
<img class="background" src="http://kirkwhalum.com/images/rotate/bgimage6.jpg" />
<div id="wrapper">
 
</div>
 
</body>
</html>

mejoralo ya que no esta completo.

y Shaito revisa tu código por que creo que no funciona..

Saludos DTB

LinkLooker · #4 (**permalink**) 08/09/2010, 13:45

Saludos, buen post!.

Una pregunta TheDark03...Veo que pones un div llamado "wrapper" ....Este nombre que significa??? ...Esa palabra la he visto en vaarios codigos de páginas y no lo entiendo todavía....Gracias por ayudar!!

TheDark03 · #5 (**permalink**) 08/09/2010, 14:10

Hola de nuevo, es un nombre cualquiera para aquel div, pero si buscas su significado en ingles es Envoltura.

Saludos DTB

alexk · #6 (**permalink**) 08/09/2010, 22:32

yo creo que la mejor solucion es usar el buscador o las FAQS CSS en su defecto que es un tema muy tratado...

xArchangellx · #7 (**permalink**) 10/09/2010, 09:48

Oye por otra parte esa pagina web esta padrisima, mi pregunta es todo esta echo en CSS????