Contenido

• Al paso
• Método 1 de 4: establecer un color de fondo sólido
• Método 2 de 4: usar una imagen como fondo
• Método 3 de 4: crea un fondo degradado
• Método 4 de 4: establece una animación de color como fondo de pantalla

Para poder establecer el fondo de una página web en HTML, solo necesita realizar un pequeño cambio en el elemento "cuerpo" dentro del estilo> / estilo> etiquetas. Los pasos dependen de cómo desee que se vea su fondo de pantalla. Aprenda a configurar el fondo de su sitio web como un color sólido, una imagen, un degradado o una animación en color.

Al paso

Método 1 de 4: establecer un color de fondo sólido

1. Abra su archivo HTML en su editor de texto favorito. A partir de HTML5, el atributo HTML bgcolor> ya no es compatible. El color de fondo, como todos los demás aspectos de estilo de su página, debe configurarse con CSS.
2. Añade el estilo> / estilo> etiqueta su documento. Todos los datos de estilo de su página (incluido el color de fondo) deben estar codificados dentro de estas etiquetas. Tienes el estilo> etiquetas ya indicadas, entonces puede desplazarse a esa parte del archivo.

   ! DOCTYPE html> html> head> estilo> / estilo> / head> / html>

3. Escriba el elemento "cuerpo" dentro del estilo> / estilo> etiquetas. Todo lo que cambie al elemento "cuerpo" en CSS afectará a toda la página.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. Agrega la propiedad "background-color" al elemento "body". En este contexto, sólo funcionará una ortografía de "color" (no: color).

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

5. Coloque el color de fondo deseado detrás de "background-color". Ahora puede indicar el nombre de un color (verde, azul, ed, etc.), utilice códigos hexadecimales (hexadecimales) (p. ej. #000000 para el negro, # ff0000 para rojo, etc.) o escribiendo el valor RGB para el color (como rgb (255,255,0) para amarillo). A continuación se muestra un ejemplo con códigos hexadeximales, que hacen que el fondo sea el mismo que el del banner de wikiHow:

   ! DOCTYPE html> html> encabezado> estilo> cuerpo {color de fondo: # 93B874; } / estilo> / cabeza> cuerpo> / cuerpo> / html>

   • Blanco: #FFFFFF
   • Rosa claro: # FFCCE6
   • Siena tostado: #993300
   • Índigo - # 4B0082
   • Violeta - # EE82EE
   • Consulte el selector de color HTML de w3schools.com para encontrar los códigos hexadecimales de cualquier color que desee.
6. Utilice "background-color" para aplicar colores de fondo a otros elementos. Al igual que configura el elemento del cuerpo, puede usar background-color para configurar los fondos de otros elementos. Simplemente coloque esos elementos dentro del estilo> / estilo> con la propiedad background-color.

   ! DOCTYPE html> html> encabezado> estilo> cuerpo {color de fondo: # 93B874; } h1 {color de fondo: naranja; } p {color de fondo: rgb (255,0,0); } / style> / head> body> h1> Este encabezado tiene un fondo naranja / h1> p> Este párrafo tiene un fondo rojo / p> / body> / html>

Método 2 de 4: usar una imagen como fondo

1. Abra el archivo HTML en un editor de texto. Mucha gente prefiere utilizar una imagen como fondo para su sitio web. Con esto puedes establecer un patrón, textura, foto o cualquier otra imagen como fondo. Desde HTML5, todos los fondos deben configurarse con CSS (hojas de estilo en cascada) dentro del estilo> / estilo> etiquetas.
2. Añade el estilo> / estilo> etiquetas a su archivo HTML. Todos los datos de estilo de su página (incluido el color de fondo) deben indicarse dentro de estas etiquetas. Usted ya ha estilo> conjunto de etiquetas, desplácese hasta esa parte del archivo.

   ! DOCTYPE html> html> head> estilo> / estilo> / head> / html>

3. Escriba el elemento "cuerpo" dentro del estilo> / estilo> etiquetas. Todo lo que cambie al elemento "cuerpo" en CSS afectará a toda la página.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. Agrega la propiedad "background-image" al elemento "body". Al agregar esta propiedad, necesitará el nombre de archivo de su imagen. Asegúrese de que la imagen esté guardada en la misma carpeta que el archivo html (o agregue la ruta completa al archivo en su servidor web).

   ! DOCTYPE html> html> head> style> body {background-image: url ("imagename.png"); color de fondo: # 93B874; } / estilo> / cabeza> cuerpo> / cuerpo> / html>

   • Es una buena idea incluir el código. color de fondo en caso de que la imagen de fondo no se cargue.
5. Capa de varias imágenes. Puede apilar varias imágenes una encima de la otra. Esto puede resultar útil si tiene imágenes con fondos transparentes que se complementan entre sí cuando se superponen.

   ! DOCTYPE html> html> head> style> body {background-image: url ("image1.png"), url ("image2.gif"); color de fondo: # 93B874; } / estilo> / cabeza> cuerpo> / cuerpo> / html>

   • La primera imagen está arriba. La segunda imagen está debajo de la primera.

Método 3 de 4: crea un fondo degradado

1. Usa CSS para crear un fondo degradado. Si está buscando algo un poco más estilizado que un color sólido, pero no tan ocupado como una animación de color, pruebe con un fondo degradado. Los degradados son colores que cambian a otras igualdades. Puede usar CSS para crear y ajustar su degradado. Antes de comenzar a crear un degradado de color, debe obtener el conocimiento suficiente de los conceptos básicos para dar formato a una página web con CSS.
2. Comprende la sintaxis estándar. Al crear un degradado, necesitará dos datos: el punto de partida y el ángulo de partida, y los colores entre los que se producirá la transición. Puede seleccionar varios colores que se superpongan y puede especificar una dirección o un ángulo para el degradado.

   fondo: degradado lineal (dirección / ángulo, color1, color2, color3, etc.);

3. Crea un degradado vertical. Si no indica una dirección, el color se ejecutará de arriba a abajo. Los diferentes navegadores tienen diferentes versiones de la función de degradado, por lo que deberá agregar diferentes versiones del código.

   ! DOCTYPE html> html> encabezado> estilo> html {altura mínima: 100%; / * Esto es necesario para garantizar que el degradado abarque todo el cuerpo de la página * /} {background: -webkit-linear-gradient (# 93B874, # C9DCB9); / * Chrome 10+, Safari 5.1+ * / background: -o-linear-gradient (# 93B874, # C9DCB9); / * Opera 11.1+ * / fondo: -moz-linear-gradient (# 93B874, # C9DCB9); / * Firefox 3.6+ * / fondo: degradado lineal (# 93B874, # C9DCB9); / * Sintaxis predeterminada (debe ser la última) * / background-color: # 93B874; / * Es una buena idea establecer un color de fondo, en caso de que el degradado no se cargue * /} / style> / head> body> / body> / html>

4. Crea un degradado con una dirección. Agregar una dirección al degradado le permite ajustar la forma en que cambia el color. Tenga en cuenta que los distintos navegadores interpretarán las direcciones de forma diferente. Todos mostrarán el mismo degradado de color.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; } cuerpo {fondo: -webkit-linear-gradient (izquierda, # 93B874, # C9DCB9); / * de izquierda a derecha * / background: -o-linear-gradient (derecha, # 93B874, # C9DCB9); / * final a la derecha * / background: -moz-linear-gradient (derecha, # 93B874, # C9DCB9); / * final a la derecha * / background: linear-gradient (a la derecha, # 93B874, # C9DCB9); / * se mueve hacia el lado derecho * / background-color: # 93B874; / * es una buena idea establecer un color de fondo, en caso de que el degradado no se cargue * /} / style> / head> body> / body> / html>

5. Utilice otras propiedades para ajustar el degradado. Puede hacer mucho más con los degradados.
   • Por ejemplo, no solo puede usar más de dos colores, sino también colocar un porcentaje detrás de cada uno. Con esto puede indicar cuánto espacio obtendrá cada segmento de color.

     fondo: gradiente lineal (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

   • Agrega transparencia a los colores. Con esto puedes desvanecer los colores. Utilice el mismo color para pasar del color a la nada. Te encantará la función rgba () Debe utilizar para indicar el color. El valor final determina el grado de transparencia: 0 para opaco y 1 para transparente.

     fondo: gradiente lineal (a la derecha, rgba (147,184,116.0), rgba (147,184,116.1));

Método 4 de 4: establece una animación de color como fondo de pantalla

1. Navegar a estilo> en su código HTML. Si encuentra un color de fondo sólido pero no lo encuentra, experimente cambiando el color de los fondos. Desde HTML 5, los colores de fondo deben definirse con CSS (Hojas de estilo en cascada). Si nunca ha establecido un color de fondo con CSS, lea la sección sobre cómo establecer un color de fondo sólido antes de probar este método.
2. Agregar la propiedad animación al elemento "cuerpo". Deberá agregar 2 propiedades diferentes, ya que cada navegador requiere un código diferente.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinite; animación: cambio de color de los años 60 infinito; } / estilo> / cabeza> cuerpo> / cuerpo> / html>

   • -webkit-animation la propiedad es necesaria para los navegadores basados ​​en Chrome (Chrome, Opera, Safari). animación es el estándar para todos los demás navegadores.
   • cambio de color es lo que se llama animación en este ejemplo.
   • Años 60 es la duración (60 segundos) de la animación / transición. Asegúrese de configurar esto tanto para el webkit como para la sintaxis predeterminada.
   • infinito indica que la animación debe repetirse indefinidamente. Si prefiere repetir los colores y luego detenerse en el último color, puede omitir esta parte.
3. Agrega colores a tu animación. Ahora va a utilizar la regla @keyframes para establecer los colores de fondo que se deben seguir, así como el tiempo que cada color puede verse en la página. Nuevamente, deberá agregar múltiples codificaciones para los distintos navegadores.

   ! DOCTYPE html> html> cabeza> estilo> cuerpo {-webkit-animation: colorchange 60s infinite; animación: cambio de color de los años 60 infinito; } @ -webkit-keyframes cambio de color {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} @keyframes cambio de color {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} / estilo> / cabeza> cuerpo> / cuerpo> / html>

   • Tenga en cuenta que las dos líneas (@ -webkit-keyframes y @keyframes tienen los mismos valores para los colores de fondo y los porcentajes. Debe permanecer uniforme para que la experiencia sea la misma para todos los navegadores.
   • Los porcentajes (0%, 25%, etc.) representan la duración total de la animación (Años 60). Cuando se carga la página, el fondo tendrá el color establecido en 0% y (# 33FFF3). Cuando se haya reproducido el 25% o 60 segundos de la animación, el fondo pasará a # 78281F, y así.
   • Puede ajustar la duración y los colores como desee.