Como hacer un background resizable?

Citar

Escrito el 12 Dic 2005 11:00 am

Buenas, pues estoy intentando hacerlo, he encontrado un codigo, pero solo me es compatible con Iexplorer..con los otros no funciona

Sabeis de algo que sea estandar i se vea en todos los navegadores??

muchas gracias!!

Por Jam3s

19 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Barcelona - Catalunya

Citar

Escrito el 12 Dic 2005 07:33 pm

me autorespondo jeje

, por si a alguien le sirve:

Código :

<body style="padding:0px; margin:0px; overflow:hidden;">

<div style="position:absolute; width:100%; height:100%; margin:0px; padding:0px; left:0px; right:0px;z-index:1"><img src="foto.jpg" width="100%" height="100%"></div>

<div style="z-index:2; position:absolute; margin:0px; padding:0px; height:100%; width:100%; overflow:scroll;">

<p>&nbsp;</p>
<p><strong>TEXT</strong></p>

</div></body>

testeado en Firefox i IExplorer i funciona OK

Por Jam3s

19 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Barcelona - Catalunya

Citar

Escrito el 13 Dic 2005 05:03 am

eso no es muy "resizable" ni mucho menos semántico ni estándar

Por fael

BOFH

2443 de clabLevel

3 tutoriales
2 articulos

Envíale un mensaje privado Web

@faelazo

Citar

Escrito el 13 Dic 2005 09:00 am

y conoces algun codigo mas estandart??

Por Jam3s

19 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Barcelona - Catalunya

Citar

Escrito el 13 Dic 2005 01:35 pm

Cual es la idea de eso si se pued saber?

No recuerdo haber necesitado nunca algo asi.

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino Bastard Operators From Hell REC Héroes

Envíale un mensaje privado Web

London, UK

@ramono

Citar

Escrito el 13 Dic 2005 03:05 pm

bueno la idea es porque tengo un fondo que es un degradado, i de esta manera, puede adaptarse solo segun sea la resolucion de pantalla del usuario

Por Jam3s

19 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Barcelona - Catalunya

Citar

Escrito el 16 Dic 2005 01:21 am

Esa no es una gran solución, pero si quieres usarla, puedes hacerlo. Nadie te detendrá

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino Anime Bloggers Premio_Secretos Team Cristalab

Envíale un mensaje privado Web

Front-end Developer en Washington, DC

@neojp

Citar

Escrito el 16 Dic 2005 09:17 am

ya ya, solo digo si sabeis de alguna otra que sea mejor, me la comenteis o me deis alguna pista

asias

Por Jam3s

19 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Barcelona - Catalunya

Citar

Escrito el 19 Dic 2005 08:59 am

Holaa, ¿Podríamos ver algun ejemplo del efecto? parece interesante...

Por rocenn

182 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado

Zaragoza - España

Citar

Escrito el 19 Dic 2005 01:45 pm

Jam3s escribió:

bueno la idea es porque tengo un fondo que es un degradado, i de esta manera, puede adaptarse solo segun sea la resolucion de pantalla del usuario

Bueno, supongo que lo que quieres hacer es algo al estilo de la página de macromedia, en clab se utiliza el mismo sistema solo que la imagen de background es más pequeña, en macromedia se usa una de 8 píxeles de ancho por 1100 pixeles de alto, así aseguran que si no pasan de 1100 pixeles en el alto de la página, siempre quedará el efecto de degradado a lo largo de toda la página, en clab o en el inicio de google (con firefox) se utiliza la misma técnica, pero con imágenes mas cortas, en lugar de tener 1100px de altura, pueden tener unos 100px, así haciendo coincidir el color final de la página con el del final del degradado en la imágen, se sigue consiguiendo el efecto, y aunque sea más corto sigue quedando bien (de hecho a mí me gusta más).
el codigo es muy simple, solo tienes que poner el las características del BODY de tu hoja de estilos lo siguiente:

Código :

background-image:url('tu_imagen_fondo.jpg');
background-repeat:repeat-x;

Incluso se puede optimizar y acortar un poco el código, pero eso es otro tema que ahora mismo no creo que te interese...
Saludos.

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

Héroes

Envíale un mensaje privado Web

@jmunozherrero

Citar

Escrito el 22 Dic 2005 10:37 am

Ostia muchas gracias Johnny.Esto me vendra muy bien para los degrados liniales.

Lo unico, y fue culpa mia, que no comenté que lo necesitaba para un degradado radial.

Igualmente muchas gracias por la explicación.

Por Jam3s

19 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Barcelona - Catalunya

Citar

Escrito el 22 Dic 2005 05:28 pm

jam3s, la teoría es la misma para uno radial, sólo que el background-repeat sería no-repeat

es cuestión de intentarle.

Por fael

BOFH

2443 de clabLevel

3 tutoriales
2 articulos

Envíale un mensaje privado Web

@faelazo

Citar

Escrito el 02 Ene 2006 07:00 pm

Ya probe esto del background

background-image:url('tu_imagen_fondo.jpg');
background-repeat:repeat-x;

pero no consigo eso de que se vea uniforme espero puedan ayudarme !!!
Aqui esta el link para que vean como me aparece
http://mx.geocities.com/freman_17/muestra.html

Por Freman

108 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

León, México

Citar

Escrito el 02 Ene 2006 07:57 pm

el problema es que en la imagen estás dejando unos margenes blancos, por eso se ven las líneas

Por fael

BOFH

2443 de clabLevel

3 tutoriales
2 articulos

Envíale un mensaje privado Web

@faelazo

Citar

Escrito el 02 Ene 2006 08:10 pm

Ya he revisado eso de los margenes en blanco pero no tienen margen, las he exportado desde corel 12 y freehand y ambos producen el mismo resultado..

Ya probe con los Formatos .png .gif .jpg

Por Freman

108 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

León, México

Citar

Escrito el 02 Ene 2006 08:14 pm

Freman escribió:

Ya he revisado eso de los margenes en blanco pero no tienen margen, las he exportado desde corel 12 y freehand y ambos producen el mismo resultado..

Ya probe con los Formatos .png .gif .jpg

Cuando lo pruebas en local también te ocurre?

Por Pedro

BOFH

3017 de clabLevel

3 tutoriales
6 articulos

Bastard Operators From Hell

Envíale un mensaje privado Web

Honduras

@pedro_php

Citar

Escrito el 02 Ene 2006 08:21 pm

hola, Gracias por responder

Mira ya cambie la configuracion de la exportacion en corel y ya no se notan las Lineas del margen pero fijate en el ejemplo se nota algo raro en el background las medidas de la imagen son las siguientes :
8 Ancho x 1100 Largo pixeles como lo recomendo Johnny, No se que pueda ser ???

Aqui esta la pag de ejemplo:
http://mx.geocities.com/freman_17/muestra.html

Por Freman

108 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

León, México

Citar

Escrito el 02 Ene 2006 08:26 pm

Freman escribió:

...ya cambie la configuracion de la exportacion en corel y ya no se notan las Lineas del margen...

Hay mejores programas que corel. Te recomiendo (para fondos y cosas como esa) photoshop, fireworks y the gimp.

Freman escribió:

...se nota algo raro en el background... ...No se que pueda ser...

Yo sí, Corel es una caca.
Hazlo con Photoshop, Fireworks o Gimp y modera la compresión de tu imagen.

Por Pedro

BOFH

3017 de clabLevel

3 tutoriales
6 articulos

Bastard Operators From Hell

Envíale un mensaje privado Web

Honduras

@pedro_php

Citar

Escrito el 02 Ene 2006 08:29 pm

Gracias !!!!

Por Freman

108 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

León, México

Citar

Escrito el 03 Ene 2006 12:37 am

pedro escribió:

Yo sí, Corel es una caca.

Uh!?, no digas eso Pedro...que aqui siguen habiendo algunos seguidores de Corel Draw

yo no claro esta

Aqui hay una ejemplo de un Background Resizable.

Para crear un efecto como ese puedes crear una imagen de fondo que sea de 768 de alto y ponerlo al centro ahi lo hice con css:

background:url(bg.gif) center;

Salu2

Por eporroa

664 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email Web

Lima - Peru

@eporroa

Como hacer un background resizable?

Escribe una respuesta rapida