Las propiedades de fondo de CSS se utilizan para definir los efectos de fondo de los elementos. Hay muchas propiedades para diseñar el fondo.
Las propiedades de fondo de CSS son las siguientes:
- Propiedad de color de fondo de CSS : la propiedad de color de fondo en CSS se utiliza para especificar el color de fondo de un elemento.
- Propiedad de imagen de fondo CSS : la propiedad de imagen de fondo se utiliza para establecer una o más imágenes de fondo en un elemento.
- Propiedad de repetición de fondo de CSS : la propiedad de repetición de fondo en CSS se utiliza para repetir la imagen de fondo tanto horizontal como verticalmente.
- Propiedad de archivo adjunto de fondo de CSS : la propiedad de archivo adjunto de fondo en CSS se utiliza para especificar el tipo de archivo adjunto de la imagen de fondo con respecto a su contenedor.
- Propiedad de posición de fondo de CSS : en CSS, la propiedad de posición del cuerpo se utiliza principalmente para establecer una imagen en una determinada posición.
- Propiedad de origen de fondo de CSS : El origen de fondo es una propiedad definida en CSS que ayuda a ajustar la imagen de fondo de la página web.
- Propiedad de clip de fondo de CSS : la propiedad de clip de fondo en CSS se usa para definir cómo extender el fondo (color o imagen) dentro de un elemento.
Propiedad de color de fondo : esta propiedad especifica el color de fondo de un elemento. También se puede dar un nombre de color como: “verde”, un valor HEX como “#5570f0”, un valor RGB como “rgb(25, 255, 2)”.
Sintaxis:
body {
background-color:color name
}
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: blue;
}
</style>
</head>
<body>
<h1>Geeksforgeeks</h1>
</body>
</html>
Producción:
Propiedad de imagen de fondo : esta propiedad especifica una imagen para usar como fondo de un elemento. Por defecto, la imagen se repite para que cubra todo el elemento.
Sintaxis:
body {
background-image : link;
}
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image:
url("https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png");
}
</style>
</head>
<body>
<h1>Geeksforgeeks</h1>
</body>
</html>
Producción:
Propiedad de repetición de fondo : por defecto, la propiedad de imagen de fondo repite la imagen tanto horizontal como verticalmente.
Sintaxis: Para repetir una imagen horizontalmente
body {
background-image:link;
background-repeat: repeat:x;
}
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image:
url("https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>"Hello world"</h1>
</body>
</html>
Producción:
Propiedad de archivo adjunto de fondo : esta propiedad se utiliza para corregir la imagen de fondo del suelo. La imagen no se desplazará con la página.
Sintaxis:
body {
background-attachment: fixed;
}
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image:
url("https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png");
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>Geeksforgeeks</h1>
</body>
</html>
Producción:
Propiedad de posición de fondo : esta propiedad se utiliza para establecer la imagen en una posición particular.
Sintaxis:
body {
background-repeat:no repeat;
background-position:left top;
}
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image:
url("https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png");
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<h1>Geeksforgeeks</h1>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por SrishtiGoel y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA