Crea un fondo de página web. ¿Cómo estirar el fondo a todo el ancho de la ventana? ¿Es posible utilizar HTML para configurar el fondo?

Establecer un color de fondo y/o una imagen para una página o su elemento individual es bastante sencillo. Lo principal es saber dónde y cómo hacerlo, así como tener un código de color y/o imagen de fondo. Es posible que aprendas muchas cosas nuevas con este artículo, pero lo creé específicamente para principiantes. Por tanto, todo será lo más breve y detallado posible al mismo tiempo. Lo principal es que no solo recibirá una idea general y ejemplos ya preparados, sino también una comprensión de cómo crear un fondo en HTML.

Para establecer el fondo en HTML utilice el DOCTYPE intermedio

Y comenzaré con el hecho de que en HTML5 no es posible configurar. Se decidió agregar esta característica a CSS. Por lo tanto, si planea utilizar lo siguiente y desea obtener un código válido (correcto), debe elegir el tipo de documento de transición. Para ello, su página web debe comenzar con la siguiente línea:

Transicional//ES" "http://www.w3.org/TR/html4/loose.dtd">

Dejando eso de lado, pasemos a comprender cómo se crea el fondo. Y lo primero que hay que tener en cuenta aquí es la diferencia entre color de fondo Y imagen de fondo. Al principio va color de fondo, que llena todo el espacio disponible de la página o su elemento. Superpuesto encima hay una repetición. imagen de fondo. Visualmente esto se puede representar de la siguiente manera:

Fondo de un documento HTML y sus elementos.

Lo segundo que necesitas saber es la diferencia entre cuerpo del documento Y elemento del documento. Cuerpo del documento Se indica en el código HTML de una página web mediante la etiqueta BODY, que incluye todo el contenido de la página web. Obviamente, el fondo del cuerpo del documento no puede ser transparente. Si no se especifica el fondo del cuerpo del documento, se utiliza el valor predeterminado especificado en la configuración del navegador.

Elementos de la página están dentro de la etiqueta BODY. Cabe señalar que no es posible establecer el color y/o la imagen de fondo usando HTML para todos los elementos del documento. Por ejemplo, una imagen de fondo solo se puede especificar para tablas. Por defecto suelen tener un fondo transparente.

El atributo bgcolor para crear un color de fondo.

preguntar color de fondo el documento o sus elementos utilizan el atributo bgcolor, por ejemplo:





En este caso, configuramos el color de fondo de la página en su conjunto. Y aquí hay un ejemplo de cómo configurar el color de fondo de una tabla en la etiqueta TABLE:





Texto con fondo

Cabe destacar que el color de fondo de la tabla se puede especificar tanto para las filas de la etiqueta TR como para sus celdas en la etiqueta TD.

¿Cómo saber el código de color?

Probablemente ya habrás notado que el color en HTML está configurado en un color especial. código, por ejemplo: #ec008c. Para conocer el código del color que necesita, puede utilizar uno de los editores gráficos. Por ejemplo, en Photoshop puedes usar " Herramienta cuentagotas» (Pipeta) para obtener color desde un punto de la imagen. Luego, debes hacer clic en el color resultante en la barra de herramientas y en la ventana que se abre “ Selector de color» (Selección de color) copiar el código de color.

Tenga en cuenta que este código no tendrá un signo de almohadilla (#) al principio; este signo deberá agregarse manualmente.

También puede utilizar numerosos servicios en línea, por ejemplo:

  • etc.

Su principio de funcionamiento es aún más sencillo: haga clic en el color deseado y obtenga su código.

El atributo de fondo para crear una imagen de fondo.

Igual que en el caso del color de fondo, y en el caso de imagen de fondo Debe utilizar un atributo especial, a saber, fondo, por ejemplo:





En este caso, estamos configurando una imagen de fondo para toda la página. Cabe destacar que debido a la limitación del tamaño de la imagen, ésta se repetirá, por ejemplo:

Como puede ver, cuando se repite, la transición entre imágenes se nota. Por lo tanto, se suelen utilizar imágenes especiales donde se tiene en cuenta este punto.

Y aquí hay un ejemplo de cómo configurar una imagen de fondo para una tabla en la etiqueta TABLE:





Texto con fondo

Cabe destacar que la imagen de fondo sólo se puede configurar para la tabla en su conjunto y/o para su celda individual. Esto no funcionará para una cuerda.

Ruta absoluta y relativa a la imagen de fondo.

Vale la pena prestar especial atención. dirección de la imagen de fondo. En este caso, se utiliza una ruta relativa a la imagen, es decir La dirección se especifica en relación con la ubicación del archivo de imagen para el archivo de la página web. Esta opción no puede considerarse particularmente exitosa. Es mejor utilizar una ruta absoluta a la imagen, es decir. su URL completa, Por ejemplo:





En este caso, no tendrás ningún problema relacionado. Puedes leer más sobre esto.

resumámoslo

El uso de los atributos bgcolor y background está obsoleto, por lo que para la validez del código HTML tendrás que utilizar el DOCTYPE transicional. Para configurar el color de fondo en HTML, se utilizan códigos especiales, que puede encontrar en un editor gráfico o utilizando servicios especiales en línea. La imagen de fondo se duplica dentro del área asignada y se encuentra encima del color de fondo. Para especificar una imagen de fondo, es mejor utilizar su URL completa. Eso es todo lo que tengo. Gracias por su atención. ¡Buena suerte!

a las 22:37 Editar mensaje

A la hora de configurar cualquier sitio web, además de la funcionalidad, el diseño es muy importante. Esto es lo que marca el estilo y diseño propio de una determinada empresa o persona para quien se está creando el sitio web. Personalizar el color de fondo y la imagen es fácil siguiendo las instrucciones de este artículo.

Abra su archivo HTML usando el Bloc de notas o cualquier otro editor de texto al que esté acostumbrado.


Por ejemplo, tomemos una página web primitiva con un mínimo de texto. Puede abrir su archivo usando cualquier navegador.
Primero, cambie el color de su fondo, ya que las personas con una conexión a Internet lenta no podrán ver inmediatamente la imagen de fondo del sitio. Durante un cierto período de tiempo, mientras se carga la imagen, solo podrán ver el color de su sitio. Ingresar en la etiqueta


parámetro bgcolor=”*****”, donde ***** es el código de color. Puede encontrar los colores para HTML en cualquier editor gráfico seleccionando la opción "para web" o en el sitio web https://colorscheme.ru/color-names


Sólo necesitas seleccionar un color en la paleta del círculo y asignar su intensidad dentro del cuadrado. A la derecha verás dos códigos para html. Cópialos y pégalos en el bloc de notas.


Después de seleccionar un color e insertarlo en el código, vea si hizo todo correctamente viendo la página web resultante desde un navegador.


Ahora puedes comenzar a insertar tu imagen de fondo. Coloque la imagen deseada en la carpeta de códigos para mayor comodidad. Ponle un nombre en letras latinas.


Ahora descubra la ubicación del archivo haciendo clic derecho sobre él, seleccionando "Abrir con" y haciendo clic en cualquier navegador instalado en su computadora.


Copie la dirección de la barra de búsqueda de su navegador. Ahora en la etiqueta
  • ingrese la línea:


estilo = "imagen de fondo: url ('archivo:///C:/Users/FILE_PATH.jpg')"


Guarde su archivo.


Tenga en cuenta que para los usuarios con una resolución de pantalla más alta, su imagen se duplicará hacia abajo y hacia la derecha. No quedará bien si la imagen no es monocromática. Existen comandos especiales para corregir este parámetro.

  • repetición de fondo: "Valor". Las opciones para su valor podrían ser: “repeat-x” – repite su imagen de fondo tanto horizontal como verticalmente. “repeat-y” – repetición sólo verticalmente. “sin repetición”: la imagen se congela en su lugar y no se repite. “espacio”: toda la página se llenará con el número máximo de copias de la imagen, las más externas se recortarán. “redondo” – la misma opción, pero los bordes de la imagen se escalarán cuidadosamente;
  • adjunto de fondo: "Valor". Si sustituye la etiqueta "desplazamiento" en lugar de la palabra Valor, la imagen se desplazará junto con el sitio. “fijo”: el fondo permanece sin cambios al desplazarse;
  • tamaño de fondo: Valor Valor2. Aquí los valores deben tomar un valor en píxeles. Por ejemplo: 100 px 200 px. Además de los píxeles, se aceptan valores porcentuales. Esta es una opción para llenar la página con una imagen. Además de los números, puede ingresar dos parámetros: “contener” – llena la página con una imagen a lo largo del lado largo y “portada” – llena la página con una imagen a lo ancho.

Una vez que conozca los conceptos básicos para llenar una página con fondo en HTML, estará listo para crear su primer sitio web.

Del autor: Hola a todos. Los colores de fondo y las imágenes juegan un papel muy importante en el diseño web, ya que permiten diseñar cualquier elemento de forma más atractiva. Hoy veremos cómo crear un fondo en HTML.

¿Es posible utilizar HTML para configurar el fondo?

Diré de inmediato que no. En general, HTML no fue creado para diseñar páginas web. Es simplemente muy inconveniente. Por ejemplo, existe un atributo bgcolor con el que puedes establecer el color de fondo, pero esto es muy inconveniente.

En consecuencia, utilizaremos hojas de estilo en cascada (CSS). Hay muchas más oportunidades para establecer un fondo. Hoy veremos los más básicos.

¿Cómo configurar el fondo usando CSS?

Entonces, antes que nada, debes decidir en qué elemento deseas establecer el fondo. Es decir, necesitamos encontrar un selector en el que escribiremos una regla. Por ejemplo, si necesita configurar el fondo para toda la página, puede hacerlo a través del selector de cuerpo y para todos los bloques a través del selector div. Bueno, etc El fondo puede y debe estar vinculado a cualquier otro selector: clases de estilo, identificadores, etc.

Una vez que haya decidido el selector, debe escribir el nombre de la propiedad. Para establecer el color de fondo (es decir, un color sólido, no un degradado o una imagen), utilice la propiedad color de fondo. Después de eso, debes poner dos puntos y escribir el color en sí. Esto se puede hacer de diferentes maneras. Por ejemplo, utilizando palabras clave, código hexadecimal, formatos rgb, rgba, hsl. Cualquier método servirá.

El método más utilizado es el código hexadecimal. Para seleccionar colores, puede utilizar un programa que muestre el código de color. Por ejemplo, photoshop, paint o alguna herramienta online. En consecuencia, como ejemplo, escribiré un trasfondo general para toda la página web.

cuerpo (color de fondo: #D4E6B3;)

Este código debe insertarse en la sección principal. Es importante que los archivos estén en la misma carpeta.

Imagen como fondo

Para la imagen usaré un pequeño ícono en lenguaje html:

Creemos un bloque vacío con un identificador:

< div id = "bg" > < / div >

Démosle dimensiones y antecedentes explícitos:

#bg(ancho: 400px; alto: 250px; imagen de fondo: url(html.png); )

#bg(

ancho: 400px;

altura: 250 píxeles;

imagen de fondo: URL (html.png);

En este código puedes ver que utilicé una nueva propiedad: imagen de fondo. Está diseñado específicamente para insertar una imagen como fondo de un elemento html. Veamos qué pasó:

Para especificar una imagen, debe escribir la URL de la palabra clave después de los dos puntos y luego indicar la ruta al archivo entre paréntesis. En este caso, la ruta se especifica en función del hecho de que la imagen está en la misma carpeta que el documento html. También debe especificar el formato de la imagen.

Si ha hecho esto y el fondo aún no se muestra en el bloque, verifique nuevamente si escribió correctamente el nombre de la imagen y si la ruta y la extensión están configuradas correctamente. Estas son las razones más comunes por las que el fondo simplemente no aparece porque el navegador no puede encontrar la imagen.

¿Pero notaste una cosa? El navegador tomó y multiplicó la imagen a lo largo del bloque. Entonces, para que lo sepas, este es el comportamiento predeterminado de las imágenes de fondo: se repiten vertical y horizontalmente siempre que quepan en el bloque. Mediante este comportamiento puedes controlarlo fácilmente. Para hacer esto, use la propiedad de repetición de fondo, que tiene 4 valores principales:

Repetir – valor predeterminado, la imagen se repite en ambos lados;

Repetir-x – se repite solo en el eje x;

Repetir-y: se repite solo a lo largo del eje y;

No repetir – no se repite en absoluto;

Puedes escribir cada valor y ver qué sucede. Lo escribiré así:

repetición de fondo: repetir-x;

fondo-repetir: repetir-x;

Ahora repita solo horizontalmente. Si establece que no se repita, solo habrá una imagen.

Genial, podemos terminar aquí, ya que estas son las capacidades básicas para trabajar con el fondo, pero te mostraré 2 propiedades más que te permiten tener más control.

A través de la repetición, los diseñadores de diseño solían poder crear texturas de fondo y degradados usando una imagen pequeña. Podría tener 30 por 10 píxeles o incluso menos. O tal vez un poco más. La imagen era tal que cuando se repetía en uno o incluso en ambos lados, no se veían transiciones, por lo que el resultado era un fondo único y sin costuras. Por cierto, vale la pena utilizar este enfoque ahora si desea utilizar una textura perfecta en su sitio web como fondo. Hoy en día, el gradiente ya se puede implementar utilizando métodos css3, definitivamente hablaremos de esto más adelante.

Posición de fondo

De forma predeterminada, la imagen de fondo, a menos que esté configurada para repetirse, estará en la esquina superior izquierda de su bloque. Pero la posición se puede cambiar fácilmente usando la propiedad de posición de fondo.

Puedes configurarlo de diferentes maneras. Una opción es simplemente indicar los lados en los que debe ubicarse la imagen:

posición de fondo: arriba derecha;

posición de fondo: arriba derecha;

Es decir, verticalmente todo sigue igual: la imagen de fondo se ubica arriba, pero horizontalmente cambiamos el lado a derecha, es decir, derecha. Otra forma de establecer la posición es como porcentaje. En este caso, la cuenta atrás comienza en cualquier caso desde la esquina superior izquierda. 100% - todo el bloque. Así, para situar la imagen exactamente en el centro, la escribimos así:

posición de fondo: 50% 50%;

posición de fondo: 50% 50%;

Recuerde una cosa importante sobre el posicionamiento: el primer parámetro es siempre la posición horizontal y el segundo es la posición vertical. Entonces, si ve un valor de 80% 20%, puede concluir inmediatamente que la imagen de fondo se desplazará mucho hacia la derecha, pero no bajará mucho.

Y finalmente, puedes especificar la posición en píxeles. Todo es igual, solo que en lugar de % habrá px. En algunos casos, dicho posicionamiento puede ser necesario.

Notación taquigráfica

De acuerdo en que el código resulta bastante engorroso si todo está configurado como lo hicimos nosotros. Resulta que es necesario especificar la ruta a la imagen, la repetición y la posición. Por supuesto, la repetición y la posición no siempre son necesarias, pero en cualquier caso sería más correcto utilizar una notación abreviada para la propiedad. Se parece a esto:

fondo: #333 url(bg.jpg) sin repetición 50% 50%;

fondo: #333 url(bg.jpg) sin repetición 50% 50%;

Es decir, el primer paso es grabar el color de fondo sólido general, si es necesario. Luego el camino hacia la imagen, la repetición y la posición. Si algún parámetro no es necesario, simplemente omítalo. De acuerdo, esto es mucho más rápido y conveniente, y también reducimos significativamente nuestro código. En general, te aconsejo que escribas siempre de forma abreviada, aunque sólo necesites indicar un color o una imagen.

Controlar el tamaño de la imagen de fondo

Nuestra imagen actual no es muy buena para demostrar el siguiente truco, así que tomaré otra. Sea del tamaño de un bloque o más. Entonces, imagina que te enfrentas a la tarea de hacer una imagen de fondo para que no ocupe completamente su bloque. Y la imagen, por ejemplo, es incluso más grande que el tamaño del bloque.

¿Qué puedes hacer en este caso? Por supuesto, la opción más sencilla y razonable sería simplemente reducir la imagen, pero no siempre es posible hacerlo. Digamos que está en el servidor y de momento no hay tiempo ni oportunidad de reducirlo. El problema se puede resolver utilizando la propiedad background-size, que puede considerarse relativamente nueva y que permite manipular el tamaño de la imagen de fondo, o incluso de cualquier fondo.

Entonces mi imagen ahora ocupa todo el espacio en el bloque, pero le daré un tamaño de fondo:

tamaño de fondo: 80% 50%;

tamaño de fondo: 80% 50%;

Nuevamente, el primer parámetro establece el tamaño horizontal, el segundo, el tamaño vertical. Vemos que todo se aplicó correctamente: la foto se convirtió en el 80% del ancho del bloque en ancho y la mitad en alto. Aquí solo necesita hacer una aclaración: al configurar el tamaño como porcentaje, puede influir en las proporciones de la imagen. Así que tenga cuidado si no quiere alterar las proporciones.

Como puedes adivinar, el tamaño del fondo también se puede especificar en píxeles. Hay dos palabras clave más que también se pueden utilizar:

Portada: la imagen se escalará de modo que al menos en un lado llene completamente el bloque.

Contener: lo escala para que la imagen encaje completamente en el bloque en su tamaño máximo.

La ventaja de estos valores es que no cambian las proporciones de la imagen, dejándolas iguales.

También debe comprender que estirar la imagen puede provocar un deterioro de su calidad. Puedo dar un ejemplo de la vida y la práctica real de los maquetadores. Todo el mundo sabe y comprende que al diseñar para escritorio, es necesario adaptar el sitio a los anchos del monitor principal: 1280, 1366, 1920. Si toma una imagen de fondo con un tamaño de, digamos, 1280 por 200 y no le da un tamaño de fondo, luego pantallas con un ancho mayor. Aparecerá un espacio vacío, la imagen no llenará el ancho por completo.

En el 99% de los casos, esto no le conviene al desarrollador web, por lo que establece el tamaño de fondo: cubierta para que la imagen siempre se extienda hasta el ancho máximo de la ventana. Esta es una buena técnica, pero ahora se enfrentará al problema de que los usuarios con un ancho de pantalla de 1920 píxeles pueden ver una calidad de imagen subóptima.

Déjame recordarte que se estirará hasta su ancho máximo. En consecuencia, la calidad se deteriorará automáticamente. La única solución correcta aquí sería utilizar inicialmente una imagen más grande: 1920 píxeles de ancho. Luego, en las pantallas más anchas estará en su tamaño natural, y en otras simplemente se cortará gradualmente, pero al mismo tiempo, si la imagen de fondo se selecciona correctamente, esto no afectará la apariencia del sitio.

En general, este es sólo un ejemplo de cómo utilizar el conocimiento adquirido en este artículo al diseñar diseños reales.

Fondo translúcido usando CSS

Otra característica que se puede implementar usando CSS es un fondo translúcido. Es decir, a través de este fondo se podrá ver qué hay detrás.

Como ejemplo, estableceré la página completa como fondo de la imagen que usamos anteriormente en los ejemplos. Para el bloque con identificador bg, en el que realizamos todos nuestros experimentos, configuraremos el fondo usando el formato de configuración de color rgba.

Como dije antes, existen muchos formatos para configurar colores en CSS. Uno de ellos es rgb, un formato bastante conocido por quienes trabajan en editores gráficos. Está escrito así: rgb(17, 255, 34);

El primer valor entre paréntesis es la saturación de rojo, luego verde y luego azul. El valor puede ser numérico de 0 a 255. En consecuencia, el formato rgba no es diferente, solo se agrega un parámetro más: el canal alfa. El valor puede ser de 0 a 1, donde 0 es transparencia total.

27/12/14 55,8K

Cualquier habitación lucirá mucho mejor si su piso está cubierto con una costosa alfombra persa. Entonces, ¿por qué su sitio web es peor? Tal vez sea hora de “cubrir” su suelo con una costosa y elegante alfombra hecha a mano. Echemos un vistazo más de cerca a cómo crear un fondo para un sitio web:

Antecedentes del sitio

Sucede que el antiguo diseño del sitio web se ha vuelto aburrido. Y quiero algo nuevo y sabroso. Y el nuevo diseño será el mismo si lo haces tú mismo.

Pero cambiar por completo todo el diseño de un recurso por su cuenta es una tarea ingrata. Y no todo el mundo tiene las manos debidamente entrenadas para esta tarea. Por lo tanto, la forma más sencilla de actualizar una plantilla antigua es cambiar el color de fondo del recurso o su imagen de fondo.

Hay varias formas de cambiar el fondo de un sitio web. Para ello se utilizan las capacidades de CSS o HTML. Pero muchas de las propiedades para trabajar en segundo plano tienen el mismo nombre y método de aplicación en estas tecnologías web.

Conceptos básicos de trabajar con fondos en html.

Se pueden utilizar varios elementos como fondo:

  • Color;
  • Imagen de fondo;
  • Imagen de textura.

Veamos el uso de cada uno de ellos con más detalle.

Para establecer el color de fondo de un sitio, utilice la propiedad color de fondo del atributo de estilo. Es decir, para establecer el color principal de una página web, debes escribirlo dentro de la etiqueta. . Por ejemplo:

Fondo del sitio web #55D52B




Además del código de color hexadecimal, se admite un valor en formato RGB o palabra clave. Ejemplos:

Fondo del sitio web rgb(23,113,44)



Fondo del sitio web verde




Establecer el color de fondo mediante palabras clave tiene varias limitaciones en comparación con los otros dos métodos.

HTML admite sólo 16 palabras clave para configurar colores. Éstos son algunos de ellos: blanco, rojo, azul, negro, amarillo y otros.

Por lo tanto, para configurar el fondo de un sitio html, es mejor utilizar el formato hexadecimal o RGB.

Además de la selección de colores, hay otras opciones de personalización disponibles. Si la propiedad color de fondo se establece en transparente, el fondo de la página se volverá transparente. Este valor se asigna a esta propiedad de forma predeterminada.

Ahora veamos las capacidades del lenguaje de hipertexto para configurar una imagen de fondo para un sitio. Esto se puede hacer usando la propiedad de imagen de fondo.




Como puede ver en el código, la imagen está vinculada a través de la ruta URL especificada entre paréntesis. Pero no todas las imágenes son tan grandes como para que su tamaño ocupe toda el área de la pantalla. Veamos cómo se mostrará la imagen más pequeña.

Supongamos que estamos desarrollando un sitio web sobre poesía y necesitamos utilizar una imagen de Pegaso como fondo. ¡El caballo alado personificará la libertad del pensamiento creativo del poeta!


Necesitamos que la imagen se muestre en el medio de la pantalla una vez. Pero, lamentablemente, el navegador no comprende nuestros elevados deseos. Y muestra una imagen más pequeña para el fondo del sitio tantas veces como el área de la pantalla pueda acomodar:

Quizás cuatro caballos sonrientes con alas sean demasiada inspiración para los poetas. Por tanto, prohibimos la clonación de nuestro Pegaso. Hacemos esto usando la propiedad de repetición de fondo. Valores posibles:

  • repetir-x – repetir la imagen de fondo horizontalmente;
  • repetir-y – verticalmente;
  • repetir – en ambos ejes;
  • no-repeat – la repetición está prohibida.

Entre las opciones enumeradas, nos interesa la última. Antes de cambiar el fondo del sitio, lo usamos en nuestro código:




Pero, por supuesto, sería mejor si nuestro volante estuviera ubicado en el medio de la pantalla. La propiedad background-position está destinada precisamente a posicionar la imagen de fondo en la página. Puede establecer las coordenadas de ubicación de varias maneras:
  • Palabra clave ( arriba, abajo, centro, izquierda, derecha);
  • Porcentaje: el conteo comienza desde la esquina superior izquierda;
  • En unidades de medida (píxeles).

Usemos la opción de centrado más simple:



Sucede que necesitas fijar la posición de una imagen al desplazarte. Por lo tanto, antes de crear una imagen como fondo del sitio, utilice la propiedad especial background-attachment. Los valores que acepta son:


  • voluta;

  • fijado.

Necesitamos el último valor. Ahora nuestro código de ejemplo se verá así:



Fondo de textura del sitio web

En el primer ejemplo utilizamos un paisaje desértico grande y hermoso como fondo. Pero hay que pagar el importe total por tanta belleza. El peso de una imagen realizada en alta calidad puede alcanzar varios megas.

Este volumen no afecta de ninguna manera la velocidad de carga de la página del navegador con una conexión a Internet de alta velocidad. Pero ¿qué pasa con Internet móvil? Al usarlo, cargar varios "metros" llevará mucho tiempo.

Para crear un sitio web, una pregunta importante es cómo crear un fondo en HTML. Este procedimiento implica el uso de determinadas etiquetas: palabras y letras de código. Gracias a ellos, puedes poner un fondo diferente, hacerlo monocromático, rellenarlo o poner cualquier imagen en lugar del fondo. Estas acciones serán muy útiles para todos los maquetadores y para aquellos que decidan "vestir" su sitio web por su cuenta.

haciendo el fondo

Antes de crear el fondo del sitio web en HTML, debe abrir el código HTML de la página en un editor de texto. Debe recordar que las etiquetas de la página se colocan verticalmente. Luego, entre las etiquetas … , necesitas poner una etiqueta- estas etiquetas son necesarias para aclarar el estilo de los elementos de una página web determinada. En lugar de los tres puntos debes escribir - cuerpo (fondo:) . Esta es una opción que le permite configurar diferentes estilos para el fondo de la página. Puede realizar la operación de configuración de color de dos maneras. Primero:

Cuerpo (fondo:#000000): el fondo de la página ahora debería ser negro.

Este método también es adecuado para configurar tanto el color como la imagen de fondo. Es después de los dos puntos donde puede colocar un código de color o un enlace a la imagen. O puede utilizar un método que solo signifique establecer un color: un relleno específico para la página. Después de los dos puntos es necesario escribir el llamado parámetro – color. Y después, ponemos el código del color en sí. Este método es bueno si lo usas como plantilla. Anótalo y guárdalo, y cuando sea necesario, establece un color y ponlo en la página.

Puedes poner una imagen en lugar de un fondo liso. Si necesita saber: en HTML, cómo hacer una imagen como fondo, entonces debe realizar operaciones similares. Escribe etiquetas, pon cuerpo (fondo: enlace a la imagen). Debemos recordar que la imagen en sí puede estar en cualquier lugar. Y en un sitio web de Internet, pero es mejor crear una carpeta en la raíz del documento. En la carpeta en la que se guardará toda la información sobre la página del sitio, debe crear otra, para imágenes. La operación se verá así:

Ahora la imagen que ha elegido será el fondo de toda la página del sitio. Esperamos que entiendas cómo hacer un fondo en html. ¡Inténtalo y definitivamente todo saldrá bien!




Arriba