Cómo colocar un código HTML para poner una imagen de fondo en un centro fijo

Escrito por jay leon | Traducido por gabriela alessandrello
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo colocar un código HTML para poner una imagen de fondo en un centro fijo
Una imagen de fondo afecta directamente la apariencia general de un sitio web. (Comstock/Comstock/Getty Images)

Una imagen de fondo que combine y quede bien con un diseño y su contiendo es elemental para lograr un sitio web que se vea profesional. Para lograr esto es necesario un posicionamiento correcto. El atributo para fondos de HTML está desvalorizado, por eso puedes usar hojas de estilo para lograr el formato de fondo para tus imágenes. Con estilos tipo CSS, puedes lograr un control total de la forma en que las imágenes aparecen y se comportan en las páginas web.

Otras personas están leyendo

Posicionamiento

Un documento HTML puede tener una imagen de fondo para toda la página como para los elementos específicos en ésta, como por ejemplo una tabla. Los estilos tipo CSS pueden dar formato a estas imágenes de varias maneras. Estos describen efectos y atributos como el nombre del archivo fuente para la imagen, la frecuencia en la que se repite la imagen en la página y su posicionamiento sobre el documento.

Sintaxis

Para configurar la posición y alineamiento de la imagen de fondo tendrás que usar varias propiedades de fondo CSS. Cada una de ellas controla un atributo específico. Debes usar el elemento que usa la imagen como el selector de estilo de la hoja. Por ejemplo, si quieres que el fondo se alinee a la imagen de fondo principal, usa "body" como selector, ya que corresponde a la etiqueta <body> en HTML.

La estructura es la misma en todas las sintaxis de CSS: selector {property:value;} donde "selector" es el elemento HTML, "property" el atributo o efecto y "value" la información para el atributo.

Propiedades

Cada propiedad para fondos CSS tiene su propia función. La propiedad de la imagen de fondo se usa para llamar al archivo específico de la imagen. La propiedad de repetición de fondo determina cuántas veces se repite en la página. Para decidir si la imagen debe "flotar" en la página o quedar "fija" a medida que el usuario baja, se debe usar un archivo adjunto de fondo. Para configurar el alineamiento de la imagen usa la propiedad de posicionamiento de fondo. Ten en cuenta que esta última se puede marcar en formato de texto como por ejemplo "center" (centro) "left top" (izquierda superior), etc; como porcentaje; como unidades o como herencia ("inherit"), es decir que usará la misma posición que otro elemento HTML que lo contenga. Para que la imagen quede en el centro de la página, puedes usar "center center", "center" o "50% 50%".

Ejemplos

Una imagen de fondo recibe formato con estilos CSS que se colocan entre las etiquetas principales o the <head> del documento HTML. Si está marcada como hoja de estilo externa, quita el código entre las flechas.

En este ejemplo, la imagen de fondo se coloca en el centro de la página. Está configurada para que no se repita ("no repeat") de modo que aparezca sólo una vez y no en estilo mosaico. El fondo queda fijo ("fixed"); sin importar si subes o bajas en la página, se quedará en el mismo lugar en tu pantalla, como si estuviera flotando. Por ejemplo, si hay texto en la página, éste se moverá pero el fondo no lo hará. Si quieres que la imagen se mueva con el resto de la página, deberás ingresar "scroll" en lugar de "fixed" para los adjuntos de fondo.

<head><style type="text/css"> body { background-image:url('company.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; } </style></head>

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles