AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL

Fondos CSS


Next Page >>
HTML images

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:

 

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.

Ejemplo
<!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:

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.

Ejemplo
<!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>
Nota:  Al aplicar la imagen de fondo a un elemento, asegúrese de que la imagen que elija no afecte la legibilidad del contenido del texto del elemento.

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.

Ejemplo
<!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

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


1
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.