Imágenes de fondo CSS receptivas

Imágenes de fondo CSS receptivas
Usando HTML y CSS, los desarrolladores web pueden hacer muchas cosas para que la aplicación o las páginas web sean más confiables y efectivas. Incrustar elementos receptivos es uno de ellos. Más específicamente, el elemento receptivo significa que cuando los usuarios abren una página web en cualquier dispositivo, no afectará su visibilidad. Agregar imágenes receptivas en CSS modificará automáticamente el tamaño de la pantalla.

Esta publicación explicó imágenes de fondo CSS receptivas.

Cómo agregar imágenes de fondo CSS receptivas?

Para agregar la imagen receptiva como fondo, siga las instrucciones a continuación.

Paso 1: Crear contenedor Div

Inicialmente, cree un contenedor Div con la ayuda del ""Etiqueta y asigna un"identificación"Atributo con un valor de su elección.

Paso 2: Insertar encabezado

A continuación, agregue un rumbo dentro del ""Elemento utilizando el"

" etiqueta. Después de eso, agregue algún texto entre las etiquetas "":


Imagen de fondo


Imagen colorida de hojas establecidas como el fondo de esta página. Ahora podemos hacer cualquier documento en esta página.

Paso 3: Establecer imagen de fondo

Para establecer la imagen de fondo del elemento, primero acceda al elemento con la ayuda del "identificación" atributo. Luego, agregue el "imagen de fondo"Propiedad CSS para establecer la imagen en la parte trasera del elemento. El valor de esta propiedad especifica la URL de la imagen.

Paso 4: Haga que la imagen de fondo responda

Para que la imagen de fondo responda, inserte las siguientes propiedades de CSS:

#img-background
IMAGEN DE ANTECEDENTES: URL ('emoji.png ');
Altura: 100%;
Ancho: 100%;
tamaño de fondo: cubierta;
Background-Repeat: sin repetición;
Border: Auto Solid Red;

La descripción del código mencionado anteriormente se menciona de la siguiente manera:

  • El "altura"Propiedad utilizada para establecer la altura del elemento.
  • "anchoLa propiedad se utiliza para definir el tamaño del elemento horizontalmente.
  • "tamaño de fondoLa propiedad se utiliza para configurar el tamaño de la imagen. Por ejemplo, tenemos su valor como "cubrir"Para llenar la imagen en el elemento.
  • "repetición"La propiedad establece si la imagen se repetirá o no.
  • "bordeSe utiliza la función para agregar el borde alrededor del elemento.

Se puede observar que hemos respondido con éxito la imagen de fondo:

Hemos explicado el método para agregar una imagen de fondo receptiva con CSS.

Conclusión

Para agregar la imagen de fondo CSS receptiva, primero, cree un contenedor junto con el atributo "ID". Luego, acceda al elemento DIV usando "ID" en CSS e incrusta la imagen de fondo usando el "imagen de fondo"Propiedad CSS. Después, "tamaño de fondo","repetición", y "bordeLas propiedades también se utilizan para hacer que la imagen responda. Esta publicación ha demostrado cómo establecer la imagen de fondo receptiva en CSS.