Fondos CSS
CSS Tutorial » Fondos CSS
The CSS background properties are used to add background effects for elements.
CSS proporciona varias propiedades para diseñar el fondo de un elemento, incluido colorear el fondo, colocar imágenes en el fondo y administrar su posicionamiento, etc.En estos capítulos, aprenderá sobre las siguientes propiedades de fondo de CSS:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background (shorthand property)
Color de fondo CSS
La propiedad background-color se utiliza para establecer el color de fondo de un elemento.
El siguiente ejemplo demuestra cómo establecer el color de fondo de toda la página.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Establecer el color de fondo de un elemento en CSS</title>
<style>
body {
background-color: #F5EFB1;
}
h1 {
background-color: #87DABF;
}
</style>
</head>
<body>
<h1>Background Color Demo</h1>
<p>CSS define cinco propiedades para establecer el fondo de cada elemento <br />
El siguiente ejemplo muestra una página web con un color gris claro de fondo: <br />
CSS y que almacene todas las imágenes utilizadas en el diseño de las páginas.<br />
Se aplica a: Todos los elementos<br />
Valor inicial: transparent<br />
Propiedad: background-color<br />
Valores: color | transparent | inherit</p>
</body>
</html>
Los valores de color en CSS se especifican con mayor frecuencia en los siguientes formatos:
- un nombre de color - como "red"
- un valor HEX - como "#ff0000"
- un valor RGB - como "rgb(255, 0, 0)"
Etiquetas: fondos css para paginas web, animados, degradado,ejemplo, html, color, definicion, para css html
Imagen de fondo
La propiedad background-image establece una imagen como fondo de un elemento HTML.
Veamos el siguiente ejemplo que establece la imagen de fondo para toda la página.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>La propiedad background-image establece una imagen como fondo de un elemento HTML</title>
<style>
body {
background-image: url("https://www.agernic.com/uploads/landscape_beach.jpg");
}
</style>
</head>
<body>
<h1>La propiedad background-image establece una imagen como fondo de un elemento HTML</h1>
<p>CSS define cinco propiedades para establecer el fondo de cada elemento <br />
El siguiente ejemplo muestra una página web con un color gris claro de fondo: <br />
CSS y que almacene todas las imágenes utilizadas en el diseño de las páginas.<br />
Se aplica a: Todos los elementos<br />
Valor inicial: transparent<br />
Propiedad: background-color<br />
Valores: color | transparent | inherit</p>
</body>
</html>
De forma predeterminada, el navegador repite o divide en mosaico la imagen de fondo tanto horizontal como verticalmente para llenar toda el área de un elemento. Puede controlar esto con la propiedad background-repeat.
Repetición de fondo
La propiedad background-repeat le permite controlar cómo se repite o se coloca en mosaico una imagen de fondo en el fondo de un elemento. Puede configurar una imagen de fondo para que se repita verticalmente (eje y), horizontalmente (eje x), en ambas direcciones o en ninguna dirección.
Probemos el siguiente ejemplo que demuestra cómo establecer el fondo degradado para una página web repitiendo la imagen cortada horizontalmente a lo largo del eje x.
De manera similar, puede usar el valor repeat-y para repetir la imagen de fondo verticalmente a lo largo del eje y, o el valor no-repeat para evitar la repetición por completo.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Configuración de repetición de fondo horizontal en CSS</title>
<style>
body {
background-image: url("https://www.agernic.com/uploads/smiley.gif");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>La propiedad background-image establece una imagen como fondo de un elemento HTML</h1>
<p>CSS define cinco propiedades para establecer el fondo de cada elemento <br />
El siguiente ejemplo muestra una página web con un color gris claro de fondo: <br />
CSS y que almacene todas las imágenes utilizadas en el diseño de las páginas.<br />
Se aplica a: Todos los elementos<br />
Valor inicial: transparent<br />
Propiedad: background-color<br />
Valores: color | transparent | inherit</p>
</body>
</html>
fondos css para paginas web, animados, degradado,ejemplo, html, color, definicion, para css
Fondos CSS - css.es
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.