Cómo Establecer El Color de Fondo en HTML

Cómo establecer el color de fondo en
HTML
4 métodos:Establecer un fondo de color sólidoUsar una imagen como fondoEstablecer un
fondo con degradado de coloresEstablecer un fondo que cambia de color
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
< s t y l e > < / s t y l e > . 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.
Método 1
Establecer un fondo de color sólido
1.
1
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]
2. 2
Agrega las etiquetas < s t y l e > < / s t y l e > 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 < s t y l e > , simplemente desplázate
hacia esa parte del archivo.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
</html>
3. 3
Escribe el elemento "body" dentro de las etiquetas < s t y l e > < / s t y l e > . 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>
4.
4
Agrega la propiedad "background-color" al elemento "body".
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:
}
</style>
</head>
<body>
</body>
</html>
5.
Añade el color de fondo deseado a la propiedad "background-color". Puedes

escribir un color por su nombre en inglés (por ejemplo, g r e e n , b l u e , r e d , etc.),
usar el código hexadecimal (hex) del color que te guste (por ejemplo, # 0 0 0 0 0 0
para el negro, # f f 0 0 0 0 para el rojo, etc.) o escribir el valor RGB del color (por
ejemplo, r g b ( 2 5 5 , 2 5 5 , 0 ) 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>
o Blanco: # F F F F F F
o Rosa claro: # F F C C E 6
o Siena oscuro: # 9 9 3 3 0 0
o Índigo: # 4 B 0 0 8 2
o Violeta: # E E 8 2 E E
o 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.
6.
6
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
< s t y l e > < / s t y l e > usando la propiedad "background-color".[2]
<!DOCTYPE html>
<html>
<head>
<style>
body {
}
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>
Método 2
Usar una imagen como fondo
1. 1
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 < s t y l e > < / s t y l e > .
2. 2
Agrega las etiquetas < s t y l e > < / s t y l e > 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.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
</html>
3. 3
Escribe el elemento "body" dentro de las etiquetas < s t y l e > < / s t y l e > . 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>
4. 4
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");
}
</style>
</head>
<body>
</body>
</html>
o También sería una buena idea agregar la propiedad "background-color", solo

por si la imagen de fondo no se carga.
5. 5
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");
}
</style>
</head>
<body>
</body>
</html>
o La primera imagen de la lista se mostrará por encima de las demás. La

segunda aparecerá debajo de la primera y así sucesivamente.
Método 3
Establecer un fondo con degradado de colores
1.
1
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.
2.
2
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]
background: linear-gradient(dirección o ángulo, color1, color2,

color3, etc.);
3.
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>
4.
4
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>
5.
5
Utiliza otras propiedades para ajustar el degradado. Hay muchas cosas más que
puedes hacer con degradados.
o 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.
o background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000
90%);
o 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 r g b a ( ) . El valor final determinará la transparencia: 0 es
completamente sólido y 1 completamente transparente.
o background: linear-gradient(to right, rgba(147,184,116,0),
rgba(147,184,116,1));
Método 4
Establecer un fondo que cambia de color
1. 1
Ve a la sección < s t y l e > 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.
2. 2
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>
o La propiedad - w e b k i t - a n i m a t i o n es necesaria para los navegadores

basados en Chromium (Chrome, Opera, Safari). a n i m a t i o n es la
propiedad estándar para los demás navegadores.
o En este ejemplo, c o l o r c h a n g e será el nombre de la animación.
o 6 0 s (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.
o i n f i n i t e 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.
3. 3
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>
o Ten en cuenta que las dos reglas (@ - w e b k i t - k e y f r a m e s y

@ k e y f r a m e s ) 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.
o Los porcentajes (0 % , 2 5 % , etc.) son en relación a la duración total de la
animación (6 0 s ). Cuando la página se cargue, el fondo será del color
establecido para el 0 % (# 3 3 F F F 3 ). Una vez que la animación se haya
reproducido durante un 25 % de los 60 segundos, el fondo se transformará a
# 7 8 2 8 1 F y así sucesivamente.
o Puedes modificar los tiempos y los colores para ajustarlos al resultado
deseado.

Cómo Establecer El Color de Fondo en HTML

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Cómo Establecer El Color de Fondo en HTML

Caricato da

Copyright:

Formati disponibili

Cómo establecer el color de fondo en

Establecer un fondo de color sólido

Abre el archivo HTML con tu editor de texto preferido. A partir de HTML 5, se

Agrega la propiedad "background-color" al elemento "body".

Añade el color de fondo deseado a la propiedad "background-color". Puedes

Usa "background-color" para aplicar un color de fondo a otros elementos. Del

Usar una imagen como fondo

Abre el archivo HTML en un editor de texto. Muchas personas prefieren usar

Agrega la propiedad "background-image" al elemento "body". Cuando

o También sería una buena idea agregar la propiedad "background-color", solo

También es posible agregar varias capas de imágenes. Puedes apilar varias

o La primera imagen de la lista se mostrará por encima de las demás. La

Establecer un fondo con degradado de colores

Utiliza CSS para crear un fondo de degradado de colores. Si estás buscando

background: linear-gradient(dirección o ángulo, color1, color2,

Crea un degradado vertical. Si no especificas la dirección, el degradado irá de

Crea un degradado direccional. Si especificas la dirección del degradado podrás

Establecer un fondo que cambia de color

Agrega la propiedad de animación en el elemento "body". Tendrás que agregar

o La propiedad - w e b k i t - a n i m a t i o n es necesaria para los navegadores

o Ten en cuenta que las dos reglas (@ - w e b k i t - k e y f r a m e s y

Potrebbero piacerti anche