Aquí estoy de nuevo, en esta página he preparado una cabecera con la propiedad background-image animada, que considero que hace un bonito efecto, propiedad de css que explicaré, en detalle, en este articulo. Por si a alguién le distrae la animación, incluyo botones de play y pause de la misma. La cabecera, se redimensiona de tamaño, con una sencilla función de javascript, al hacer scroll y llegar a una determinada altura.
También tiene un botón para alternar entre los modos claro y oscuro, otro botón, que despliega y recoge, una sección, donde van incluidos, un formulario de contacto, y botones de mis redes sociales. Para analizar la importancia de los formularios y como construirlos, os invito a mi página Formularios.
Incluyo un menu de enlaces de navegación por mis distintas páginas, que se visualiza cuando esta a pantalla completa, y otro que aparece (el icono de hamburguesa), cuando ya se reduce de tamaño. Apareciendo así mismo, un botón para ocultar completamente la cabecera, gracias al método toggle de javascript (alternar clases), que explico detalladamente con ejemplos en método toggle y los iconos sociales, aprovecho para remitiros a mi página, donde analizo la importancia de las redes sociales y diferentes formas de ubicar los botones, en las páginas web Botones Sociales.
El que me conozca, ya sabrá, que soy un enamorado de darle dinámismo a mis páginas, usando las propiedades de CSS3: transition, animation, y transform. Para aprender la sintaxis y todas las carácteristicas de estas tres mágnificas propiedades, os remito, a mis páginas:.
Donde encontraras numerosos ejemplos prácticos del uso de estas propiedades.
Para darle un aspecto más atractivo a nuestras páginas, css nos brinda la propiedad background-image.
El valor por defecto de background-image: none; para declarar una ó varias imágenes de fondo, declararemos en nuestro archivo css, background-image: url("") óbackground-image: url(""), url(""), url("") ...; si son varias.
Donde especificaremos la URL ó dirección de la imágen, con su ruta relativa ó absoluta. Por si la imágen elegida no se encuentra ó es más pequeña que su contenedor y no se repite, es conveniente poner background-color, que será, lo que se visualizará, cuando no cubra la imágen todo su contenedor ó el navegador no la localice.
background-image, también admite como valor, una serie de funciones de gradientes de colores, lineales, radiales y cónicos, sobre los que no me voy a extender en esta página, pues puedes verlos detalladamente en esta página.
Background-image, tiene una serie de propiedades que debemos conocer, para personalizarla y son:
background-repeat: Establecemos el modo, en que se repetirá la imágen, en caso de ser más pequeña, que su contenedor. Por defecto su valor es repeat.
background-attachment: Indicamos si nuestra imágen de fondo, estará fija o se desplazara al hacer scroll, que es el valor por defecto.
background-position: Podemos mover nuestra imágen de fondo, estableciendo sus coordenadas, por defecto toma 0% 0%.
background-size: Podemos establecer el tamaño de nuestra imágen de fondo, sin necesidad de utilizar editores gráficos.
background-clip: Con esto, podemos establecer el modo de relleno de la imágen de fondo. Es decir si cubrirá los margenes o no.
background-origin: Si hemos utilizado la propiedad anterior, con esta estableceremos el origen de ese relleno. Las coordenadas del origen.
Cada una de estas propiedades, para nuestra imágen de fondo, tienen a su vez diversos valores, que vamos a estudiar.
Abajo, para ver todos los valores que podemos asignarle a esta propiedad, he preparado un contenedor <div> </div>, con un width: 500px; y un height: 400px;
En el CSS he declarado unicámente background-image: url("web.jpg");. La imágen web.jpg tiene unas dimensiones de 220x105 px. y he dejado, al navegador, que le asigne todos los valores por defecto para background-image.
Por tanto en la propiedad que nos ocupa background-repeat:, su valor por defecto es repeat. O sea cubre todo el contenedor con repeticiones de la imágen tanto en horizontal, como en vertical.
Para observar el resto de valores que puede adoptar, tienes debajo de la caja, una hilera de botones, para ir clicandolos y observando el comportamiento según su valor.
A esta propiedad, podemos asignarle los valores: scroll ó fixed.
background-attachment: scroll; es el valor por defecto y significa que al hacer scroll por la página la background-image, obedecera al scroll con su contenedor.
background-attachment: fixed; implica que al hacer scroll en la página, la background-image, permanece fija, pudiendo desaparecer de su contenedor, dependiendo de sus dimensiones, valor útil en determinados escenarios. Recomendable para observar esta propiedad, ser consciente de las dimensiones de la imágen, su contenedor y la posición de background-image.
Haz scroll por la página y observa a lo que me refiero, en las dos cajas de abajo. La primera tiene el valor scroll y la segunda el fixed.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Con esta propiedad, podemos posicionar nuestra background-image. Por defecto background-position: 0% 0%;. Nosotros podemos cambiar este comportamiento por defecto, asignandole otra posición a nuestra imágen de fondo.
Esto podemos hacerlo, especificando la posición, con unidades (píxeles, ems, etc), con porcentajes (%), como con palabras clave (top, right, bottom, left y center).
A tener en cuenta, que si a background-position, solo le asignámos un valor, lo tomara para el eje X y le asigná por defecto, center ó 50%, al eje Y.
Bueno, aquí abajo he preparado una animación, para ver la declaración que haremos en nuestro CSS para diferentes posiciones, el contenedor tiene width: 500px; height: 400px;. La imágen es la misma, web.jpg, de 220x105px; que bien enlazada con su url(""); usaré como background-image:. Con la propiedad animation ,que me apasioná, combinó, las propiedades de background-position: y background-size:, ejercicio que hagó, para observar, lo versatil que es en definitiva la propiedad background-image: y lo útil que puede resultar para maquetar nuestras páginas.
background-size: contain;
Y aquí paro con: background-position: center; background-size: cover;
Si habeís visto la animación de arriba, ya han salido casi todos los valores que podemos asignarle a esta propiedad. Lo interesante es que podemos darle las dimensiones de ancho y alto que necesitemos para nuestros diseños, sin necesidad de retocar las imágenes con ningún editor gráfico (pero es preferible, optimizar las imágenes), voy a detallarlos y veremos la sintaxis para declararlos:
Valor Significado Sintaxis
auto No escala la imágen, utilizando el tamaño real de la imágen, es el valor por defecto. background-size: auto;
size (1 parámetro) En unidades de medida (px, em, etc) ó porcentaje (%). Se aplicará al ancho y el alto sera auto, manteniendo la proporción de la imágen. background-size: 300px;
size size (2 parámetros) En unidades de medida (px, em, etc) ó porcentaje (%). Redimensionamos el ancho y el alto, tendremos que saber las dimensiones de la imágen, para no deformarla. background-size: 300px 150px;
cover Escala el ancho de la imágen de fondo al ancho de su contenedor. background-size: cover;
contain Escala el alto de la imágen de fondo al alto del contenedor. background-size: contain;
Para acabar de ver, en la práctica la propiedad background-size: ; he usado de contenedor toda la sección, poniendole un background-image: ; multiple (tema que trato, más abajo), con tres imágenes .png de unos 200x150 px, de tres fántasticas razas de perro, estas de encima.
Por situaros, mi background-image: ; tiene estas propiedades:
background-image: url("chihuahua.png"), url("san-bernardo.png"), url("pastor-aleman.png");
background-repeat: no-repeat;
background-position: 10% 50%, 30% 50%, 50% 50%;
background-attachment: fixed;
La propiedad background-size:; no lo declaro, y adopta, como ya sabreís, auto por defecto, que es el tamaño real de las imágenes.
Ahora si quieres observar, el efecto de los valores de background-size:; ve pinchando, los siguientes botones.
Estas últimas propiedades de background-image: nos sirven para establecer el modo de relleno, del color ó la imágen de fondo. Ambas propiedades pueden recibir los mismos valores:
border-box: el color ó imágen de fondo cubrirá su contenedor, hasta el borde por fuera.
padding-box: con este valor se cubre, el contenedor hasta los border, por su parte interna.
content-box: se cubre, solo la parte del contenido
Para observar mejor el efecto de estas propiedades, he preparado debajo, un par de contenedores, con los border anchos y dobles para ver mejor como funcionán.
border-box:
Que cala más bonita
padding-box:
Quien pudíera estar allí chapoteando.
Bueno, conocerlas esta bien, pues pueden ser útiles en escenarios concretos.
Ya os adelante esta posibilidad, en secciones anteriores del articulo. Podemos establecer una background-image:; compuesto por multiples imágenes, la sintaxis básica seria:
{background-image: url("imagen1.png"), url("imagen2.png"), url("imagen3.webp"),...;}
CSS, por lo que si empleamos formatos de imágen que admiten transparencia, como .png ó webp, podríamos hacer composiciones muy interesantes.
Como tenemos una imágen de fondo, compuesta de varias imágenes, en las propiedades derivadas, también podemos ir especificando sus valores en su orden, o si especificamos solo uno se aplicara a todas las imágenes.
Por ejemplo en un fondo con tres imágenes podríamos declarar la propiedad:
background repeat: repeat-x no repeat round;
que aplicaría su valor en orden a cada imágen, ó si declaramos:
background-repeat: repeat-y;
aplicariamos el mismo valor para las tres imágenes de nuestro fondo.
Como ya sabreís, podemos escribir esta propiedad con su sintaxis abreviada o shorthand properties en inglés, que en el caso de esta propiedad es especialmente importante controlarla, pues nos puede ahorrar escribir, muchas líneas de codigo, la estructura sería:
background: color image position / size repeat attachment origin clip;
Por último decir que el parámetro / size es opcional, pero si se coloca la / se esperara poner background-size a continuación y si alguno de los valores de background, no lo necesitamos, bastará con omitirlo.
Bueno amigos, si habéis llegado hasta aquí, gracias por leerme, espero haber dejado clara esta estupenda propiedad, que junto con fondos con gradientes lineales, radiales ó conicos de colores, nos sirven a la perfección para darle un grán estilo a nuestras páginas.
Si te gusta mi contenido ó alguna parte concreta, ya sabes lo que siempre recomiendo, click derecho y ver código fuente, o revisar la página con las herramientas dev tools, de los navegádores, así es como yo aprendo algo todos los dias, para sugerencias, o cualquier comentario, hazmelos llegar, gracias hasta pronto.
