Fondo fijo

[diegons_92]

Buenas, soy nuevo en html y css, y tengo alguna duda, a ver si me podéis echar un cable :)

El caso es que estoy haciendo una página en html utilizando hojas de estilo css, y en el archivo .css he puesto un fondo y me gustaría que estuviese fijo, ya que cuando redimensiono la ventana, el fondo se empequeñece.

También me gustaría que el fondo se adaptase a cualquier resolución de pantalla... pero bueno poco a poco :D

¡Muchas gracias!

[pzin]

Con fondo fijo normalmente se entiende que al hacer scroll, dicho fondo se mantenga inmóvil, lo que viene haciéndose así:

Código CSS:

background-attachment: fixed
 

Luego, otra cosa diferente es que se adapte a la ventana, lo cual puedes hacer con:

Código CSS:

background-size: cover
 

Con esto último seguramente existan partes de la imagen que no se vean, ya que para mantener las proporciones toma la medida mínima posible y la otra queda oculta.

[diegons_92]

mi idea es que cuando esté la ventana completa se vea todo, y si hago la pantalla mas pequeña, haya partes que no se vean.

Ejemplo:

Si el fondo de la página es la foto del gato y la pantalla esta completa el fondo se vería así:



Y si redimensiono un poco quedaría así:



Ocultando el resto de fondo

Muchas gracias!

[pzin]

¿Y qué código estás usando? Porque ese es el comportamiento por defecto de cualquier fondo.

[diegons_92]

Iniciado por Bonez

¿Y qué código estás usando? Porque ese es el comportamiento por defecto de cualquier fondo.

Vale, me acabo de dar cuenta que tenía esta linea en el body:

Código HTML:

background-size: 100% 100%;

Ya que el fondo es más grande que mi pantalla, y no se ve completa.

Me gustaría que si la ventana esta en tamaño completo se viese el fondo entero, y si redimensiono quede el fondo como dije anteriormente.

¡Gracias!

[pzin]

Iniciado por diegons_92

Me gustaría que si la ventana esta en tamaño completo se viese el fondo entero, y si redimensiono quede el fondo como dije anteriormente.

Entonces con quitar esa regla de background-size debería de quedarte así. Prueba a ver si es así como lo quieres.

[diegons_92]

Iniciado por Bonez

Entonces con quitar esa regla de background-size debería de quedarte así. Prueba a ver si es así como lo quieres.

Si quito la linea de "background-size: 100% 100%;" al ser el fondo más grande, no se ve completo el fondo, aunque al redimensionar si consigo el resultado que quiero

[pzin]

No sé si estás pidiendo dos cosas diferentes.

¿Quieres que se vea completo cuando el navegador está maximizado pero que que recorte cuando no lo está? Si es así, no se puede con CSS, ya que CSS no sabe si está o no a tamaño completo el navegador, y además son dos tipos de comportamientos diferentes.

[diegons_92]

Iniciado por Bonez

No sé si estás pidiendo dos cosas diferentes.

¿Quieres que se vea completo cuando el navegador está maximizado pero que que recorte cuando no lo está? Si es así, no se puede con CSS, ya que CSS no sabe si está o no a tamaño completo el navegador, y además son dos tipos de comportamientos diferentes.

Sï, mi intención es esa, que cuando la ventana esta maximizada el fondo se vea completamente (como cuando pongo "background-size: 100% 100%;") pero a la vez que al empequeñecer la ventana el fondo se recorte.
Si no es posible pues nada, lo dejaré como está, jajaj que remedio.

¡Muchas gracias por todo!

[pzin]

El problema es ese, que con CSS no puedes saber si el navegador está o no maximizado.

Lo que sí puedes hacer, mediante media queries, es que el fondo ocupe el 100% dado algún(os) ancho(es) específico(s), y en caso contrario que el comportamiento del fondo sea el normal. Pero sería hacerlo para anchos específicos, no si el ancho del navegador es igual al ancho máximo de la resolución. No sé si me explico. Estoy medio zombie ya por la hora.

[diegons_92]

Iniciado por Bonez

El problema es ese, que con CSS no puedes saber si el navegador está o no maximizado.

Lo que sí puedes hacer, mediante media queries, es que el fondo ocupe el 100% dado algún(os) ancho(es) específico(s), y en caso contrario que el comportamiento del fondo sea el normal. Pero sería hacerlo para anchos específicos, no si el ancho del navegador es igual al ancho máximo de la resolución. No sé si me explico. Estoy medio zombie ya por la hora.

Creo que te entiendo. Quieres decir que puedo hacer que si el ancho maximo de la pantalla es 1200px pues que se comporte de una manera, si es otro de otra manera... etc etc