Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Gcb93 en 6 Febrero 2012, 16:29 pm



Título: Fondo fijo
Publicado por: Gcb93 en 6 Febrero 2012, 16:29 pm
Hola

estoy buscando la manera de hacer un fondo fijo y ajustable a las diferentes resoluciones que se puede encontrar, asi tendre el mismo fondo mas o menos

he estado intentando hacer algunos de estos ejemplos pero no consigo que me salgan

http://css-tricks.com/perfect-full-page-background-image/

podriais ayudarme a hacer un ejemplo, o bien me pasais un ejemplo asi termino de entender bien para luego adaptarlo a mi pagina

esperos respuestas y desde ya muchas gracias


Título: Re: Fondo fijo
Publicado por: #!drvy en 8 Febrero 2012, 00:35 am
No entiendo, porque no consigues que te salgan...

Código
  1. <html>
  2. <head>
  3. <style>
  4. html {
  5. /* Ponemos fondo y lo centramos */
  6. background: url(bg.jpg) no-repeat center center fixed;
  7. /* Le decimos a webkit (Chrome, Safari...) que se ajuste */
  8. -webkit-background-size: cover;
  9. /* Le decimos a Mozilla (Firefox) que se ajuste */
  10. -moz-background-size: cover;
  11. /* Le decimos a Opera que se ajuste */
  12. -o-background-size: cover;
  13. /* Le decimos a todos que se ajusten */
  14. background-size: cover;
  15.  
  16. /* Le decimos a las versiones por debajo de IE 9 que se ajusten xD */
  17. /* Esto no funciona tal y como en los demas navegadores asi que no te sorprendas */
  18. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale');
  19. -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";
  20.  
  21. /* Color pa que se vea el texto */
  22. color:#FFF;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <h4>Esto es un texto</h4>
  28. </body>
  29. </html>

1. Recuerda que bg.jpg es la imagen de fondo.
2. Recuerda que tienes que usar una imagen bastante grande (resolución).
 2.1 Por ejemplo una de 1024 de ancho.
3. Recuerda que, en IE por debajo de la versión 9, la cosa no funciona bien y el fondo se mueve en vez de reducirse.

Resultado final:
(http://i.elhacker.net/i?i=K3J451WJZobLOOR5rJX3pmVo) (http://i.elhacker.net/d?i=K3J451WJZobLOOR5rJX3pmVo)

Saludos


Título: Re: Fondo fijo
Publicado por: Gcb93 en 19 Febrero 2012, 16:52 pm
Muchisimas gracias, nose porque no conseguia que me saliera
ahora si funciona