logo

Mida de fons en CSS

Introducció

Podem determinar la mida de la imatge de fons amb l'ajuda de la propietat background-size. Podem fer que la imatge sigui com a esquerra, estirada i ajustada a l'espai disponible. Hi ha tantes sintaxis per a la implementació de la propietat background-size. Podem establir la propietat de la propietat background-size amb l'ajuda de valors i valors unitaris.

En els valors unitaris, podem definir la propietat de mida de fons en forma de percentatges o píxels. També podem definir-ho amb l'ajuda del valor global. Podem implementar-lo amb l'ajuda del valor global mitjançant l'ajuda del fragment següent.

Oracle sql no és igual
 .card-hero inherit 

Entenem breument el tema.

Valors de paraules clau

Podem utilitzar el valor de la paraula clau amb l'ajuda de cover and contain. Podem canviar la mida de fons amb l'ajuda d'aquests valors de paraules clau.

1. Coberta:

Podem establir la mida del fons amb l'ajuda de la paraula clau de la portada. Si definim la mida del fons com a coberta, aleshores la imatge encaixarà al contenidor sense deixar cap espai. També millorarà la imatge per adaptar-se a la pantalla.

Entenem-ho amb l'ajuda de l'exemple següent.

Exemple 1:

mylivecricket a

Codi:

 Document body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f0f0f0; } .background-container { position: relative; width: 100vw; height: 100vh; background-image: url(&apos;https://e0.pxfuel.com/wallpapers/163/906/desktop-wallpaper-beautiful-nature-with-girl-beautiful-girl-with-nature-and-moon-high-resolution-beautiful.webp&apos;); background-size: cover; background-position: center; text-align: center; color: white; } .background-container h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); } <p>Where every step unveils a new wonder.</p> 

Sortida

Mida de fons en CSS

Explicació:

Al codi anterior, es combinen tres imatges de fons mitjançant la propietat background-image. La propietat background-size especifica les mides de cada imatge de fons: 30% d'amplada per a la primera imatge, 40% d'amplada per a la segona imatge i coberta per a la tercera imatge. La propietat de posició de fons s'estableix de manera diferent per a cada imatge per crear una composició equilibrada.