Cómo establecer el color de fondo en HTML

Publicado en 1 enero 1970 por General admin — No hay comentarios ↓

Para establecer el color de fondo de una página web en HTML, solo necesitas hacer un cambio rápido en el cuerpo del código (elemento “body”), dentro de las etiquetas . Los pasos pueden variar según la apariencia que quieras darle a tu fondo. Aprende cómo establecer para el fondo de tu página web un color sólido, una imagen, un degradado de color o una animación de varios colores.

editarPasos

editarEstablecer un fondo de color sólido

Abre el archivo HTML con tu editor de texto preferido. A partir de HTML 5, se dejó de usar el atributo de HTML <bgcolor>. Ahora el color de fondo, como así también todos los demás aspectos relacionados al estilo de página, se deben establecer a través de código CSS.^[1]
Agrega las etiquetas a tu documento. Toda la información de estilo de la página (incluyendo el color de fondo) deberá incluirse dentro de esas etiquetas. Si tu documento ya tiene las etiquetas , simplemente desplázate hacia esa parte del archivo.
Escribe el elemento “body” dentro de las etiquetas . Todo lo que agregues dentro del elemento “body” en CSS afectará a la página completa.
```
<!DOCTYPE html>
<html>
<head>
 
<style>
body { 
 
}
 
</style>
</head>
<body>
</body>
 
</html>
```

Agrega la propiedad “background-color” al elemento “body”.

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: 
}
</style>
</head>
<body>
</body>
</html>

Añade el color de fondo deseado a la propiedad “background-color”. Puedes escribir un color por su nombre en inglés (por ejemplo, , , , etc.), usar el código hexadecimal (hex) del color que te guste (por ejemplo, para el negro, para el rojo, etc.) o escribir el valor RGB del color (por ejemplo, para el amarillo). A continuación verás un ejemplo de cómo usar el código hex, que está configurado para mostrar el mismo color de fondo que el encabezado de página wikiHow:
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: #93B874;
}
</style>
</head>
<body>
</body>
</html>
```
- Blanco:
- Rosa claro:
- Siena oscuro:
- Índigo:
- Violeta:
- Lee este artículo (en inglés) de w3schools.com sobre el selector de colores en HTML. Aquí podrás encontrar los códigos hex para cualquier color.
Usa “background-color” para aplicar un color de fondo a otros elementos. Del mismo modo que agregaste la propiedad en el elemento “body”, puedes agregarla en otros elementos para establecer un color de fondo propio para esos elementos. Simplemente agrega las especificaciones dentro de las etiquetas usando la propiedad “background-color”.^[2]
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: #93B874;
}
h1 {
    background-color: orange;
}
p {
    background-color: rgb(255,0,0);
}
</style>
</head>
<body>
<h1>Este encabezado tendrá un fondo naranja</h1>
<p>Este párrafo tendrá un fondo rojo</p>
</body>
</html>
```

editarUsar una imagen como fondo

Abre el archivo HTML en un editor de texto. Muchas personas prefieren usar una imagen como fondo para su sitio web. Con este método puedes usar como fondo un patrón, una textura, una foto o cualquier otro tipo de imagen. A partir de HTML 5 todas las especificaciones del fondo deben incluirse con código CSS (hojas de estilo en cascada), dentro de las etiquetas .
Agrega las etiquetas dentro del archivo HTML. Toda la información de estilo de la página (incluyendo el color de fondo) se debe codificar dentro de estas etiquetas. Si ya habías incluido estas etiquetas, simplemente desplázate hacia esa parte del archivo.
Escribe el elemento “body” dentro de las etiquetas . Todo lo que agregues en el elemento “body” en CSS afectará a la página completa.
```
<!DOCTYPE html>
<html>
<head>
 
<style>
body { 
 
}
 
</style>
</head>
<body>
</body>
 
</html>
```
Agrega la propiedad “background-image” al elemento “body”. Cuando agregues esta propiedad deberás incluir el nombre del archivo de la imagen. Asegúrate de que el archivo de la imagen esté guardado en la misma carpeta que el archivo HTML (de lo contrario deberás ingresar la ruta completa del archivo en el servidor web).^[3]
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("nombre_de_la_imagen.png");
    background-color: #93B874;
}
</style>
</head>
<body>
</body>
</html>
```
- También sería una buena idea agregar la propiedad “background-color”, solo por si la imagen de fondo no se carga.
También es posible agregar varias capas de imágenes. Puedes apilar varias imágenes una encima de la otra. Esto puede serte útil si tienes imágenes con fondos transparentes que se complementan entre ellas al apilarlas.
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("imagen1.png"), url("imagen2.gif");
    background-color: #93B874;
}
</style>
</head>
<body>
</body>
</html>
```
- La primera imagen de la lista se mostrará por encima de las demás. La segunda aparecerá debajo de la primera y así sucesivamente.

editarEstablecer un fondo con degradado de colores

Utiliza CSS para crear un fondo de degradado de colores. Si estás buscando algo con más estilo que un simple fondo de color sólido, pero no tan cargado como una animación multicolor, puedes probar con un degradado de colores. Los degradados son colores que se transforman gradualmente en otros colores. Puedes crear y personalizar el degradado usando CSS. Para poder hacer un degradado, es necesario comprender los aspectos básicos del estilo de páginas con CSS.
Aprende la sintaxis básica. Para crear un degradado necesitas dos datos: el punto o ángulo de inicio y los colores entre los cuales vas a realizar la transición. Puedes seleccionar varios colores y hacer que el degradado se produzca entre todos ellos. También puedes establecer una dirección o un ángulo para el degradado.^[4]

Crea un degradado vertical. Si no especificas la dirección, el degradado irá de arriba abajo, es decir, desde la parte superior a la parte inferior. Los distintos navegadores tienen distintas implementaciones de las funciones de degradado, así que es mejor incluir varias versiones del código para que sea compatible con todos.

<!DOCTYPE html>
<html>
<head>
<style>
html {
    min-height: 100%; /* Esto es necesario para asegurarse de que el degradado se extienda a través de la página completa */
}
 
body {
    background: -webkit-linear-gradient(#93B874, #C9DCB9); /* Chrome 10+, Safari 5.1+ */
    background: -o-linear-gradient(#93B874, #C9DCB9); /* Opera 11.1+ */
    background: -moz-linear-gradient(#93B874, #C9DCB9); /* Firefox 3.6+ */
    background: linear-gradient(#93B874, #C9DCB9); /* Sintaxis estándar (debe ir al final) */
    background-color: #93B874; /* Es mejor establecer un color de fondo por si el degradado no se carga correctamente */
}
</style>
</head>
<body>
</body>
</html>

Crea un degradado direccional. Si especificas la dirección del degradado podrás establecer la forma en la que se produce el cambio de color. Ten en cuenta que los distintos navegadores tienen distintas formas de interpretar las direcciones. No obstante, todos mostrarán el mismo degradado.^[5]

<!DOCTYPE html>
<html>
<head>
<style>
html {
    min-height: 100%;
}
 
body {
    background: -webkit-linear-gradient(left, #93B874, #C9DCB9); /* de izquierda a derecha*/
    background: -o-linear-gradient(right, #93B874, #C9DCB9); /* finaliza por la derecha */
    background: -moz-linear-gradient(right, #93B874, #C9DCB9); /* finaliza por la derecha */
    background: linear-gradient(to right, #93B874, #C9DCB9); /* se desplaza hacia la derecha */
    background-color: #93B874; /* Es mejor establecer un color de fondo por si el degradado no se carga correctamente */
}
</style>
</head>
<body>
</body>
</html>

Utiliza otras propiedades para ajustar el degradado. Hay muchas cosas más que puedes hacer con degradados.
- Por ejemplo, no solo puedes agregar más de dos colores, sino que además puedes especificar un porcentaje para cada uno. De esta forma puedes establecer cuánto espacio debe ocupar cada segmento de color.
- Determina la transparencia de los colores. Así puedes hacer que los colores se desvanezcan. Por ejemplo, puedes hacer que un color se desvanezca desde sí mismo hacia la nada. Para ello, debes definir el color a través de la función . El valor final determinará la transparencia: es completamente sólido y completamente transparente.

editarEstablecer un fondo que cambia de color

Ve a la sección del código HTML. Si no te gustan los fondos de un solo color, intenta experimentar con un fondo animado que cambia de color. partir de HTML 5 todas las especificaciones del fondo deben incluirse con código CSS (hojas de estilo en cascada). Si nunca has establecido un fondo con CSS, ve a la sección “Establecer un fondo de color sólido” de este artículo antes de probar con este método.
Agrega la propiedad de animación en el elemento “body”. Tendrás que agregar dos propiedades diferentes, ya que los distintos navegadores interpretan el código de manera diferente.^[6]
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
    -webkit-animation: colorchange 60s infinite; 
    animation: colorchange 60s infinite;
    }
</style>
</head>
<body>
</body>
</html>
```
- La propiedad es necesaria para los navegadores basados en Chromium (Chrome, Opera, Safari). es la propiedad estándar para los demás navegadores.
- En este ejemplo, será el nombre de la animación.
- (60 segundos) indica la duración de la animación o transición. Asegúrate de establecer este valor tanto en la sintaxis webkit como en la estándar.
- indica que la animación se debe repetir indefinidamente. Si prefieres que la transformación de colores se produzca solo una vez y se detenga en el último color, puedes dejar esa parte en blanco.
Añade los colores de la animación. Ahora deberás usar la regla @keyframes para establecer los colores de fondo que quieres que se repitan, como así también la duración que quieres que tenga cada color en la página. Una vez más, debes insertar distintas entradas para los distintos grupos de navegadores.^[7]
```
<!DOCTYPE html>
<html>
<head>
<style>
 
body {
    -webkit-animation: colorchange 60s infinite; 
    animation: colorchange 60s infinite;
}
 
 
@-webkit-keyframes colorchange {
 
     0%  {background: #33FFF3;}
    25%  {background: #78281F;}
    50%  {background: #117A65;}
    75%  {background: #DC7633;}
    100% {background: #9B59B6;}
}
 
 
@keyframes colorchange {
     0%  {background: #33FFF3;}
    25%  {background: #78281F;}
    50%  {background: #117A65;}
    75%  {background: #DC7633;}
    100% {background: #9B59B6;}
}   
 
</style>
</head>
<body>
</body>
</html>
```
- Ten en cuenta que las dos reglas ( y ) tienen los mismos colores y porcentajes para el fondo. Es mejor que estos valores permanezcan uniformes para que los efectos se vean iguales en todos los navegadores.
- Los porcentajes (, , etc.) son en relación a la duración total de la animación (). Cuando la página se cargue, el fondo será del color establecido para el 0 % (). Una vez que la animación se haya reproducido durante un 25 % de los 60 segundos, el fondo se transformará a y así sucesivamente.
- Puedes modificar los tiempos y los colores para ajustarlos al resultado deseado.

editarReferencias

Cite error <ref> tags exist, but no <references/> tag was found

$2

Source: Wiki News

Publicado en General Etiquetado con: !

Deja un comentario Cancelar respuesta

Disculpa, debes iniciar sesión para escribir un comentario.

Cómo establecer el color de fondo en HTML

editarPasos

editarEstablecer un fondo de color sólido

editarUsar una imagen como fondo

editarEstablecer un fondo con degradado de colores

editarEstablecer un fondo que cambia de color

editarReferencias

Deja un comentario Cancelar respuesta

Tarjeta de crédito

Visa de prepago

Categorías

Recent

Ads

Comentarios recientes

Latest

Cómo establecer el color de fondo en HTML

editarPasos

editarEstablecer un fondo de color sólido

editarUsar una imagen como fondo

editarEstablecer un fondo con degradado de colores

editarEstablecer un fondo que cambia de color

editarReferencias

Deja un comentario Cancelar respuesta

Tarjeta de crédito

Visa de prepago

Categorías

Recent

Ads

Comentarios recientes

Latest

Tags