Fondo degradado radial.

[artrais]

Hola:

Estoy renovando mi website y por lo general me he dedicado a la parte del diseño. Sé algunos tips de programación pero básicos.

En este caso, tengo un jpg que he colocado de carátula pero quisiera que ocupara y se adapte a toda la pantalla con ese degradé radial. Del mismo modo que el logotipo se mantuviera en esa posición y tamaño.

A ver si alguien me da una mano con eso.

Gracias de antemano.

Mi web es: www.artrais.com

[DrFaust]

Una forma simple de hacer eso es ubicar el degrado en una imagen cuadrada grande (1920x1920 sería un tamaño razonable) y utilizar el siguiente CSS:

Código:

body {
  background-size:100%;
  background-position:center;
}

Background-size ajusta la imagen al tamaño del contenedor respetando las proporciones; por eso es importante que el degrado sea una imagen cuadrada. Sin embargo, tené en cuenta que ajustar el tamaño de la imagen puede hacer que el degrado se vea feo.

Otra opción es crear un degrado del tamaño deseado (800px, por ejemplo) que vaya del color A al color B, centrarlo en el fondo, y poner el color B como color de fondo. Así da la ilusión de que el degrado ocupa toda la pantalla, sin distorsionar la imagen.

Por último, si te interesa, hay técnicas para hacer que una imagen de fondo se ajuste al tamaño del contenedor de forma horizontal y vertical, sin respetar las proporciones. Ayer posteé un mensaje al respecto:

http://www.forosdelweb.com/f4/fondo-toda-pagina-940770/