Digamos que quiere poner una imagen o dos en una página web. Una forma es utilizar la background-imagepropiedad CSS.
Esta propiedad aplica una o más imágenes de fondo a un elemento, como a , como explica la documentación. Úselo por razones estéticas, como agregar un fondo texturizado a su página web.
Agregar una imagen
Es fácil agregar una imagen usando la background-imagepropiedad. Simplemente proporcione la ruta a la imagen en el url()valor.
La ruta de la imagen puede ser una URL, como se muestra en el siguiente ejemplo:
div { /* Background pattern from Toptal Subtle Patterns */ background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"); height: 400px; width: 100%; } O puede ser un camino local. He aquí un ejemplo:
body { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("./images/oriental-tiles.png"); } Agregar varias imágenes
Puede aplicar varias imágenes a la background-imagepropiedad.
div { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-repeat: no-repeat, no-repeat; background-position: right, left; } Eso es mucho código. Vamos a analizarlo.
Separe cada url()valor de imagen con una coma.
background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); Ahora coloque y mejore sus imágenes aplicando propiedades adicionales.
background-repeat: no-repeat, no-repeat; background-position: right, left; Hay varias subpropiedades que puede agregar a sus imágenes de fondo, como background-repeaty background-position, que usamos en el ejemplo anterior. Incluso puede agregar degradados a una imagen de fondo.
Vea cómo se ve cuando juntamos todo.
El orden importa
El orden en el que enumera sus imágenes es importante debido al orden de apilamiento. Eso significa que la primera imagen enumerada es la más cercana al usuario, según la documentación. Luego, el siguiente, y el siguiente, y así sucesivamente.
He aquí un ejemplo.
div { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-repeat: no-repeat, no-repeat; } Hemos enumerado dos imágenes en el código anterior. La primera imagen (morocco-blue.png) estará delante de la segunda (oriental-tiles.png). Ambas imágenes tienen el mismo tamaño y carecen de opacidad, por lo que solo vemos la primera imagen.
Pero si movemos la segunda imagen (oriental-tiles.png) hacia la derecha 200 píxeles, entonces puedes ver parte de ella (el resto permanece oculto).
Así es como se ve cuando juntamos todo.
¿Cuándo debería utilizar la imagen de fondo?
Hay mucho que me gusta de la background-imagepropiedad. Pero hay un inconveniente.
La imagen puede no ser accesible para todos los usuarios, señala la documentación, como aquellos que usan lectores de pantalla.
Eso es porque no puede agregar información textual a la background-imagepropiedad. Como resultado, los lectores de pantalla perderán la imagen.
Utilice la background-imagepropiedad solo cuando necesite agregar algo de decoración a su página. De lo contrario, use el
De esa manera, puede agregar texto a un elemento de imagen, utilizando el altatributo, que describe la imagen. El texto proporcionado será recogido por lectores de pantalla.
Piénselo de esta manera: background-imagees una propiedad de CSS, y CSS se centra en la presentación o el estilo; HTML se centra en la semántica o el significado.
Cuando se trata de imágenes, tienes opciones. Si se necesita una imagen para la decoración, entonces la background-imagepropiedad puede ser una buena opción para usted.
Escribo sobre aprender a programar y las mejores formas de hacerlo ( amymhaddad.com).