HTML - Fondos

De forma predeterminada, el fondo de su página web es de color blanco. Puede que no te guste, pero no te preocupes. HTML le ofrece las siguientes dos buenas formas de decorar el fondo de su página web.

Fondo HTML con colores
Fondo HTML con imágenes

Ahora veamos ambos enfoques uno por uno usando ejemplos apropiados.

Fondo HTML con colores

los bgcolor El atributo se utiliza para controlar el fondo de un elemento HTML, específicamente el cuerpo de la página y los fondos de la tabla.

Note- El atributo bgcolor en desuso en HTML5. No utilice este atributo.

A continuación se muestra la sintaxis para usar el atributo bgcolor con cualquier etiqueta HTML.

<tagname bgcolor = "color_value"...>

Este color_value se puede dar en cualquiera de los siguientes formatos:

<!-- Format 1 - Use color name -->
<table bgcolor = "lime" >
 
<!-- Format 2 - Use hex value -->
<table bgcolor = "#f1f1f1" >
 
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(0,0,120)" >

Ejemplo

Estos son los ejemplos para establecer el fondo de una etiqueta HTML:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Colors</title>
   </head>
	
   <body>
      <!-- Format 1 - Use color name -->
      <table bgcolor = "yellow" width = "100%">
         <tr>
            <td>
               This background is yellow
            </td>
         </tr>
      </table>
 
      <!-- Format 2 - Use hex value -->
      <table bgcolor = "#6666FF" width = "100%">
         <tr>
            <td>
               This background is sky blue
            </td>
         </tr>
      </table>
 
      <!-- Format 3 - Use color value in RGB terms -->
      <table bgcolor = "rgb(255,0,255)" width = "100%">
         <tr>
            <td>
               This background is green
            </td>
         </tr>
      </table>
   </body>
   
</html>

Esto producirá el siguiente resultado:

Fondo HTML con imágenes

los backgroundEl atributo también se puede usar para controlar el fondo de un elemento HTML, específicamente el cuerpo de la página y los fondos de la tabla. Puede especificar una imagen para establecer el fondo de su página o tabla HTML.

Note- El atributo de fondo en desuso en HTML5. No utilice este atributo.

A continuación se muestra la sintaxis para usar el atributo de fondo con cualquier etiqueta HTML.

Note- El atributo de fondo está en desuso y se recomienda utilizar la hoja de estilo para la configuración de fondo.

<tagname background = "Image URL"...>

Los formatos de imagen más utilizados son las imágenes JPEG, GIF y PNG.

Ejemplo

Aquí están los ejemplos para configurar imágenes de fondo de una mesa.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Images</title>
   </head>
	
   <body>
      <!-- Set table background -->
      <table background = "/images/html.gif" width = "100%" height = "100">
         <tr><td>
            This background is filled up with HTML image.
         </td></tr>
      </table>
   </body>
   
</html>

Esto producirá el siguiente resultado:

Fondos estampados y transparentes

Es posible que haya visto muchos patrones o fondos transparentes en varios sitios web. Esto simplemente se puede lograr utilizando una imagen estampada o una imagen transparente en el fondo.

Se sugiere que al crear patrones o imágenes GIF o PNG transparentes, use las dimensiones más pequeñas posibles, incluso tan pequeñas como 1x1, para evitar una carga lenta.

Ejemplo

Aquí están los ejemplos para establecer el patrón de fondo de una tabla:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Images</title>
   </head>
	
   <body>
      <!-- Set a table background using pattern -->
      <table background = "/images/pattern1.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>

      <!-- Another example on table background using pattern -->
      <table background = "/images/pattern2.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>
   </body>
   
</html>

Esto producirá el siguiente resultado:

↰ Previous page Next page ↱