Aplicación de Imágenes de Fondo a Elementos
La propiedad background-image nos permite agregar una imagen como fondo de un elemento HTML. La sintaxis básica es muy sencilla:
background-image: url("image-url.jpg");
Como valor para la propiedad background-image, utilizamos url(), y dentro de estos paréntesis, especificamos la URL de la imagen.
index.html
index.css
background-repeat
Determina si la imagen se repetirá horizontalmente, verticalmente, en ambas direcciones o no se repetirá.
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
index.html
index.css
background-position
background-position se utiliza para establecer la posición inicial de una imagen de fondo dentro del área de fondo de un elemento. Esta propiedad permite especificar dónde debe colocarse la imagen de fondo y cómo debe posicionarse en relación con el elemento. Es necesario definir la posición en los ejes x y y
background-position: x y
index.html
index.css
background-size
Controla cómo se escala la imagen de fondo:
background-size: auto | cover | contain | value in px/em/rem;
auto: tamaño original de la imagen;cover: llena todo el elemento, puede recortar;contain: ajusta toda la imagen, puede dejar espacio vacío;value: tamaño personalizado (por ejemplo,100px50px,50%).
index.html
index.css
1. ¿Qué hace la propiedad background-image?
2. ¿Qué hace la propiedad background-repeat?
3. ¿Qué propiedad determina la posición de la imagen de fondo de un elemento?
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Can you show me an example of how to use all these background properties together?
What is the difference between `cover` and `contain` for background-size?
How do I center a background image both vertically and horizontally?
Genial!
Completion tasa mejorada a 2.56Aplicación de Imágenes de Fondo a Elementos
Desliza para mostrar el menú
La propiedad background-image nos permite agregar una imagen como fondo de un elemento HTML. La sintaxis básica es muy sencilla:
background-image: url("image-url.jpg");
Como valor para la propiedad background-image, utilizamos url(), y dentro de estos paréntesis, especificamos la URL de la imagen.
index.html
index.css
background-repeat
Determina si la imagen se repetirá horizontalmente, verticalmente, en ambas direcciones o no se repetirá.
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
index.html
index.css
background-position
background-position se utiliza para establecer la posición inicial de una imagen de fondo dentro del área de fondo de un elemento. Esta propiedad permite especificar dónde debe colocarse la imagen de fondo y cómo debe posicionarse en relación con el elemento. Es necesario definir la posición en los ejes x y y
background-position: x y
index.html
index.css
background-size
Controla cómo se escala la imagen de fondo:
background-size: auto | cover | contain | value in px/em/rem;
auto: tamaño original de la imagen;cover: llena todo el elemento, puede recortar;contain: ajusta toda la imagen, puede dejar espacio vacío;value: tamaño personalizado (por ejemplo,100px50px,50%).
index.html
index.css
1. ¿Qué hace la propiedad background-image?
2. ¿Qué hace la propiedad background-repeat?
3. ¿Qué propiedad determina la posición de la imagen de fondo de un elemento?
¡Gracias por tus comentarios!
