Cómo agregar un fondo a un sitio web: 14 pasos (con imágenes)

2024 Autor: Gilbert Ryder | [email protected]. Última modificación: 2024-01-31 09:01

El fondo es uno de los elementos más importantes de un sitio web. Un buen trasfondo crea el tono del sitio web y complementa el contenido. Hay muchas formas diferentes de agregar un fondo, cada una con un propósito diferente. Algunos métodos le permiten aplicar el fondo a todas las páginas de un sitio web, mientras que otros limitan el fondo a una determinada página. Este artículo le enseña cómo agregar un fondo a su sitio web usando HTML o CSS.

Pasos

Método 1 de 2: métodos HTML

Fondo de color sólido

Paso 1. Un fondo de color sólido es el tipo de fondo más básico que puede colocar en un sitio web

De hecho, cada sitio web comienza con un fondo blanco predeterminado. Sin embargo, mientras que un fondo blanco puede resultar muy elegante y limpio cuando se usa con una combinación de colores armoniosa, un fondo de color diferente puede verse favorecido con diferentes temas.

Paso 2. Abra su código web (fuente)

Paso 3. En la etiqueta del cuerpo, agregue un atributo llamado bgcolor

Ahora, tu etiqueta corporal debería verse así:

donde COLORNAME es el nombre del color. COLORNAME se puede completar con muchos tipos de representantes de color:

• (nombre del color)
• (valor hexadecimal)
• (Valor RGB)

Paso 4. Experimentar con RGB y # puede conducir a muchos tonos, pero puede tomar la primera forma fácil

Pero recuerde que escribir un color poco común como "Ultramarine Bluish Green" resultará en blanco.

Agregar una imagen de fondo

Agregar una imagen de fondo es un poco más complicado que un fondo de color sólido

Paso 1. Agregue la propiedad de fondo a la etiqueta del cuerpo, para que se vea así:

donde SRC es la fuente de la imagen, SRC puede estar en la misma carpeta o en otra carpeta / página web.

• (en la misma carpeta)
• (dentro de una carpeta diferente)
• (en una página web diferente)

Paso 2. Recuerde escribir la extensión.gif /-j.webp" />

Método 2 de 2: métodos CSS

Fondo de color sólido

Paso 1. Para agregar un fondo de color sólido en CSS, agregue un atributo de estilo

También puede proporcionar ID y clases y utilizar hojas de estilo tanto externas como internas.

Paso 2. Su etiqueta corporal debería verse así:

donde COLORNAME es el nombre del color, valor hexadecimal o RGB (recuerde también los últimos pasos del fondo de color sólido en HTML, que también son aplicables aquí).

Agregar una imagen

Paso 1. Para agregar una imagen, agregue el atributo de estilo a la etiqueta del cuerpo

También puede proporcionar ID y clases y utilizar hojas de estilo tanto externas como internas.

Paso 2. Su etiqueta corporal ahora debería verse así:

Paso 3. Recuerde que SRC es la fuente

Puede ser de la misma carpeta, una carpeta diferente o una página web diferente.

• (en la misma carpeta)
• (dentro de una carpeta diferente)
• (en una página web diferente).

Paso 4. Recuerde agregar también las extensiones

Repetición de fondo estampado

Paso 1. Para crear un fondo de patrón repetido, agregue un fondo como se indica en los pasos anteriores

Su etiqueta corporal debe cambiarse ahora a-

Donde REPEAT-SETTINGS son los ajustes. Puede haber muchos ajustes de repetición, como:

• (El fondo se repetirá tanto vertical como horizontalmente).
• (El fondo se repetirá horizontalmente).
• (El fondo se repetirá verticalmente).

Fondo de imagen fija

Paso 1. Los fondos de imágenes fijas se ven geniales y no cambian a medida que se desplaza hacia abajo

Para hacerlos, solo necesita hacer algunos ajustes simples en el código en la sección anterior. Haz los ajustes para que la etiqueta del cuerpo se vea así:

donde SRC es la fuente de la imagen de fondo, POSITION es la posición de la imagen (puede variar desde el centro hasta la parte superior derecha); El archivo adjunto de fondo es el principal "catalizador" de este tipo de fondo. Se utiliza para indicar la posición del fondo y se recomienda que no se cambie.