problema background

crack16 · #1 (**permalink**) 21/06/2009, 22:59

pues tengo un problema estoy usando una imagen como fondo del tamaño
1234 x 750

pero cuando coloco el estilo body.. el fondo no se ve como si fuera q tubiera un margen en cada lado aca les dejo una imagen

img193.imageshack.us/img193/9595/sinttulo1elz.jpg

estoy usando una resolucion de 1280 x 1024

pero quisiera q el background se pueda ver bien en diferentes resoluciones

MasterXNicoX · #2 (**permalink**) 21/06/2009, 23:09

Hola Crack, cómo estás?...

Fijate si agregando esta propiedad al Background de la división te queda bien:

body{background:url(fondo.gif) center;}

Avisá si te sirvió.

Un Abrazo ;)

crack16 · #3 (**permalink**) 22/06/2009, 13:20

estas son las propiedades q tiene mi estilo body

body {
font-family: Arial, Helvetica, sans-serif;
background-image: url(img/FONDO.png);
background-position: bottom;
background-color: #82d9ec;
background-repeat: no-repeat;
background-attachment: fixed;

MasterXNicoX · #4 (**permalink**) 23/06/2009, 01:12

Probá de esta manera...

Cita:

body {
font-family: Arial, Helvetica, sans-serif;
background-image: url(img/FONDO.png) center;
background-position: bottom;
background-color: #82d9ec;
background-repeat: no-repeat;
background-attachment: fixed;

Avisame si funciona :)

kseso? · #5 (**permalink**) 23/06/2009, 05:03

Si tu sábana es más pequeña que tu cama y la colocas en el centro, ¿qué pasará?

En www.araudi.net tienes algún ejemplo de "fondo elástico"

crack16 · #6 (**permalink**) 23/06/2009, 10:52

lo subi para q vean el problema

allremix.com.ar

daPhyre · #7 (**permalink**) 23/06/2009, 12:31

Toma la solución que te dio Kseso?, es lo que necesitas.

MasterXNicoX · #8 (**permalink**) 23/06/2009, 17:05

Cita:

Iniciado por kseso?

Si tu sábana es más pequeña que tu cama y la colocas en el centro, ¿qué pasará?

--------------------------------------------------------------------------------------

Me voy a poner a ver lo de Fondo elástico jeje

gabrielflowers · #9 (**permalink**) 11/07/2009, 09:46

crack16 este es mi humilde aporte a tu problema:

Código HTML:

<html>
<head>
<title>Imagen de fondo fullscreen</title>
<style>
body { margin: 0px; }
#fondoestirado 
{
    width: 100%;
    height: 100%;
	background:#00f;
    margin:0;
    border:0;
    padding:0;
}
#fondoestirado img 
{
    width: 100%;
    height: 100%;
}
#contenedorgeneral 
{
    z-index: 2;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
</style>
</head>

<body>
	<div id="fondoestirado"><img src="fondo1.jpg"></div>

   <div id="contenedorgeneral">
   		<br><br><br>
   		Cuerpo de la pagina
   		<br>
   		aca pongo lo que quiero, etiquetas html,etc
   		
   </div>
   
</body>
</html>

uno de los pocos defectos q le encuentro es que si el contenido de la pagina es extenso y se genera el scroll la imagen no se estira, pruebalo y a ver si te sirve, yo probe el codigo de mikmoro tambien en varios navegadores, y en algunos no funciona bien, se q no es ineficiencia de parte de nosotros, sino la dificultad de generar codigo crossbrowser ante las diferencias funcionales de los navegadores,

espero te sirva, saludos

jomaruro · #10 (**permalink**) 11/07/2009, 13:55

Hola:

Cita:

Iniciado por gabrielflowers

yo probe el codigo de mikmoro tambien en varios navegadores, y en algunos no funciona bien

¿En cuáles lo probó? ó ¿En cuáles no funciona bien?

Saludos.

kseso? · #11 (**permalink**) 11/07/2009, 15:23

Señor Gabrielflores:
¿tuvo usted la precaución de probar su código antes de ofrecerlo?
Especialmente si el html tiene el obligado doctype.
Hágalo antes de enjuiciar el de otros, y después nos explica para qué queremos las barras de scroll que aparecen (ff 3.5, ie7, Opera 9.64, chrome, safari 4, ie6 en ietester, corriendo en vi$ta)

Un saludo

McPinkY18 · #12 (**permalink**) 11/07/2009, 17:02

ietester no muestra resultados reales lo mejor es isntalar el vmware y emular windows xp sp2 con ie6. esta comprobado en sitios web reales.. mas info google

gabrielflowers · #13 (**permalink**) 13/07/2009, 08:48

hola
jomaruro probe el ejemplo de mikmoro(referenciado por kseso) en IE6,FF3,google CHROME, y para ser mas preciso aca te muestro algunas de las deficiencias q encontre:

y estimado kseso, no fue mi intencion desprestigiar mikmoro cuando hice mi intervencion(aunque veo q te afecta, debes ser su leal seguidor), solo que yo tambien buscaba como poner una imagen de fondo fullscreen, y probe justamente los ejemplos de mikmoro, y vi q tenia algunas pequeñas deficiencias, entre las q ya mencione,y dejame decirte que probe mi codigo antes de ofrecerlo.

lo del scroll creo q me entendio mal.

ptdta: no estoy enjuiciando a nadie, sino q tambien busco codigo crossbrowser, y estoy en ese afan, creo q de verdad pocos lo consiguen, como dije antes no es culpa de nosotros los diseñadores de web, sino de la diversidad de navegadores cada uno con su forma de interpretar codigo,etc

espero el amigo crack16 nos diga si alguno de nuestras sugerencias le sirvio, saludos

willyfc · #14 (**permalink**) 13/07/2009, 09:13

Bueno, esta es la forma en que yo lo haría:

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>Untitled Document</title>
<style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
.imagen{position:absolute; z-index:1; width:100%; height:100%;}
.contenido{ width:800px; height:300px; border:1px solid #333; margin:0 auto; position:relative; z-index:2}
</style>
</head>
 
<body>
<div>
<img class="imagen" src="Imagen de un apretón de manos, un blanco y un negro.jpg" />
</div>
<div class="contenido">
    Aqui va el contenido
</div>
</body>
</html>

jomaruro · #15 (**permalink**) 14/07/2009, 13:34

Hola:

Cita:

Iniciado por gabrielflowers

hola
jomaruro probe el ejemplo de mikmoro(referenciado por kseso) en IE6,FF3,google CHROME, y para ser mas preciso aca te muestro algunas de las deficiencias q encontre:

De IE6 no te puedo decir nada, pero en FF 3.0.11 y en IE 7.0.5730.13, esos errores que mencionas, en mi PC (Windows XP SP3) no aparecen, lamento no poder poner ninguna imagen porque no dispongo de ningún programa con el que hacer una captura de pantalla. Tampoco podría decirte a que son debidas esas deficiencias que has encontrado.

Saludos.

anf · #16 (**permalink**) 14/07/2009, 19:55

Cita:

Iniciado por kseso?

Si tu sábana es más pequeña que tu cama y la colocas en el centro, ¿qué pasará?

Buenísimo el ejemplo