Fondo CSS vs color de fondo

y luego agregaremos un encabezado y un párrafo.

HTML

< división >

< h1 > Sugerencia de Linux < / h1 >

< pags > Bienvenido a nuestro sitio web < / pags >

< / división >

En CSS, ajustaremos la altura del div como ' 100% ” para que aparezca en toda la página y tamaño de fuente del texto como “ xx-grande ”. Después de eso, establezca el color de fondo como ' agua ”.

CSS

división {

altura : 100% ;

tamaño de fuente : xx-grande ;

color de fondo : agua ;

}

En la imagen proporcionada a continuación, puede ver que se aplica el color de fondo:

Propiedad de imagen de fondo CSS

Los ' imagen de fondo La propiedad ” se utiliza para establecer una o más imágenes como fondo de los elementos HTML. Puede utilizar esta propiedad para agregar diferentes imágenes de fondo para diferentes elementos.

Sintaxis

La sintaxis de la propiedad background-image es:

imagen de fondo: url()

Aquí, proporcione la ruta de la imagen que desea establecer como fondo como argumento para el ' URL() ”.

Ejemplo

Continuando con el ejemplo anterior, agregue una imagen de fondo en el ' división ' clase. Añadiremos la url de la imagen como “ URL (img.jpg) ”:

división {

...

imagen de fondo : URL ( img.jpg ) ;

}

El resultado proporcionado a continuación indica que la imagen de fondo se ha agregado correctamente:

Tenga en cuenta que la imagen se repite. Para resolver este problema, echa un vistazo a la siguiente propiedad.

Propiedad de repetición de fondo CSS

Cuando agrega una imagen como fondo en una página web, se repite de forma predeterminada. Para evitar esta repetición y establecer el patrón de acuerdo a su elección, el “ repetición de fondo Se utiliza la propiedad.

Sintaxis

La sintaxis de la propiedad background-repeat es:

repetición de fondo : repetir | repetir-x | repeat-y | no-repeat

La descripción de los valores establecidos de la propiedad background-repeat se proporciona a continuación:

• repetir: Se utiliza para repetir la imagen en ambas direcciones, vertical y horizontal.
• repetir-x: Se utiliza para establecer la repetición de la imagen solo horizontalmente.
• repeat-y: Especifica la repetición vertical de la imagen.
• no-repeat: Se utiliza para evitar la repetición de la imagen.

Ejemplo

Aquí, estableceremos el valor de la propiedad background-repeat como “ no-repeat ”:

división {

...

repetición de fondo : no-repeat ;

}

El resultado del código proporcionado anteriormente se proporciona a continuación. Puedes ver que la imagen ya no se repite:

Propiedad de posición de fondo CSS

Para establecer la posición de la imagen de fondo, el botón “ posición de fondo Se utiliza la propiedad ”. Le permite ajustar la imagen en diferentes posiciones, como arriba a la izquierda, centro a la izquierda, abajo a la izquierda, arriba a la derecha, centro a la derecha y muchas más.

Sintaxis

La sintaxis de la propiedad background-position es:

posición de fondo : valor

En lugar de ' valor ”, puede especificar la posición de la imagen.

Ejemplo

Aquí, estableceremos la posición de fondo como ' centro ”:

división {

...

posición de fondo : centro ;

}

En el siguiente resultado, la imagen aparece en el centro de la página:

Propiedad de tamaño de fondo CSS

Para establecer el tamaño de la imagen de fondo, el botón “ tamaño de fondo Se utiliza la propiedad ”.

Sintaxis

Background-size tiene la siguiente sintaxis:

tamaño de fondo : longitud|cubierta

A continuación se muestra la descripción de los valores de la propiedad background-size:

• longitud: Se utiliza para fijar el ancho y el alto de la imagen de fondo.
• cubrir: Se utiliza para ajustar la imagen de fondo en todo el fondo.

Ejemplo

Estableceremos el tamaño del fondo como “ 100% ” altura y “ 80% ' ancho:

división {

...

tamaño de fondo : 100% 80% ;

}

Puede ver que la imagen se ha redimensionado en función de las dimensiones especificadas:

Propiedad de origen de fondo CSS

Los ' fondo-origen La propiedad ” se utiliza para ajustar el área de posicionamiento de la imagen de fondo. La imagen se ajusta en la esquina superior izquierda de forma predeterminada.

Sintaxis

La sintaxis de la propiedad background-origin es:

fondo-origen : caja de relleno | cuadro de borde | cuadro de contenido

Los valores de la propiedad background-origin se describen a continuación:

• caja de relleno: Es el valor predeterminado de la propiedad background-origin utilizada para ajustar la posición de la imagen de fondo de acuerdo con el borde del relleno.
• cuadro de borde: Se utiliza para configurar la imagen de acuerdo con el cuadro de borde de la imagen.
• cuadro de contenido: Se utiliza para configurar la imagen de fondo de acuerdo con el contenido de la imagen.

Nota: La propiedad background-origin no funciona si el valor de la propiedad background-attachment se establece como ' fijado ”.

Ejemplo

Primero, cree un borde alrededor del contenedor. Aquí, continuaremos con el ejemplo anterior y estableceremos el valor de relleno como ' 10 píxeles ”. Después de eso, ajuste el ancho del borde como ' 15px ”, estilo como “ cresta ”, y el color como “ rgb(1, 68, 68) ”. Al final, asignaremos el valor de la propiedad de origen de fondo como ' cuadro de contenido ”:

división {

...

relleno : 10 píxeles ;

borde : 15px cresta RGB ( 1 , 68 , 68 ) ;

fondo-origen : cuadro de contenido ;

}

El resultado del código proporcionado anteriormente se proporciona a continuación. Puede ver que la posición de la imagen se establece de acuerdo con el contenido del div:

Propiedad CSS background-clip

Los ' clip de fondo La propiedad ” funciona en el color de fondo del elemento. Le permite controlar cuánto se extiende un color de fondo más allá de un elemento, como el relleno del elemento, su borde y su contenido.

Sintaxis

La sintaxis de la propiedad background-clip es:

fondo-origen : cuadro de borde | caja de relleno | cuadro de contenido

Los valores de la propiedad background-origin se describen a continuación:

• cuadro de borde: Es el valor predeterminado de la propiedad background-origin que se usa para establecer el color de fondo detrás del borde.
• caja de relleno: Se utiliza para ajustar el color dentro del cuadro de relleno del elemento.
• cuadro de contenido: Se utiliza para establecer el color de fondo según el contenido del elemento.

Ejemplo

Continuaremos con el ejemplo anterior y cambiaremos el valor del estilo de borde a “ punteado ” para comprender la propiedad background-clip. Después de eso, estableceremos el valor de la propiedad background-clip como ' caja de relleno ”:

división {

...

clip de fondo : caja de relleno ;

}

El resultado significa que el color de fondo blanco se muestra cuando terminó el borde del borde:

Propiedad de archivo adjunto de fondo CSS

Los ' archivo adjunto de fondo La propiedad ” se utiliza para ajustar el comportamiento o la imagen mientras se desplaza por la página. Su comportamiento puede configurarse desplazándose con otros elementos o fijo.

Sintaxis

La sintaxis de la propiedad background-attachment es:

archivo adjunto de fondo : valor

Puede establecer el valor de adjunto de fondo como ' fijado ” para arreglar la imagen de fondo o “ Desplazarse ” para permitir que la imagen se desplace con la página.

Nota: De forma predeterminada, el valor de la propiedad background-attachment se establece como ' Desplazarse ”.

Se puede ver que la imagen de fondo añadida no es estática cuando hemos hecho scroll. Ahora solucionemos este problema.

Para hacerlo, establecemos el valor de la propiedad background-attachment como “ fijado ”:

división {

...

archivo adjunto de fondo : fijado ;

}

Aquí está el resultado que demuestra que la imagen ha sido arreglada:

Ahora, diríjase a la comparación entre el fondo y las propiedades del color de fondo.

Fondo CSS vs color de fondo

La tabla dada diferenciará las propiedades de fondo y color de fondo en base a sus características:

Características	Fondo CSS	color de fondo CSS
Escribe	Es una súper propiedad.	Es una subpropiedad de la propiedad de fondo.
Funcionalidad	Establece todas las propiedades de fondo.	Establece sólo el color de fondo.
Rango	Es compatible con todas las propiedades de fondo.	Solo admite la propiedad de color de fondo.
Nivel	Cuando necesita agregar múltiples valores de fondo, es fácil de usar. Puede establecer los valores de todas las propiedades de fondo a la vez.	Se puede utilizar cuando solo necesita agregar un solo color de fondo.
Sintaxis	antecedentes: valores (Los valores son bg-color, bg-image y otras propiedades)	color de fondo: color

Se ha explicado cómo las propiedades del color de fondo difieren de las propiedades del fondo.

Conclusión

CSS “ antecedentes La propiedad ” es una propiedad abreviada que se utiliza para establecer varios valores de fondo a la vez, como el color, la imagen, la posición, el tamaño, el origen y más. Por otra parte, ' color de fondo ” solo se usa para agregar color al fondo. En esta guía, hemos discutido la diferencia entre la propiedad de fondo CSS y la propiedad de color de fondo CSS.