Fondo, Generador de estilos (Cuadro de diálogo)

Artículo
10/07/2008

Actualización: noviembre 2007

La página Fondo del cuadro de diálogo Generador de estilos permite establecer atributos para un estilo CSS (hoja de estilos en cascada) que definirán un color o una imagen de fondo cuando se aplique el estilo a una tabla o página HTML. Puede aplicar estos atributos directamente a elementos HTML o agregarlos a reglas de estilo CSS.

Para aplicar los atributos de fondo directamente a los elementos HTML de la página

Abra el documento HTML en la vista Diseño del diseñador HTML y seleccione el elemento al que desee aplicar formato.
Haga clic en Estilo en el menú Formato para abrir el cuadro de diálogo Generador de estilos.
Haga clic en Fondo en el panel izquierdo del cuadro de diálogo Generador de estilos.

En el panel derecho, aparecerá el cuadro de diálogo Fondo, Generador de estilos.

Al aplicar formato a elementos seleccionados en la vista Diseño, los atributos de estilo CSS se insertan en línea en el código de marcado HTML de la página. Cambie a la vista HTML para revisar los nuevos atributos de estilo insertados.

Para agregar atributos de fondo a una regla de estilo CSS definida en una hoja de estilos externa

Abra una hoja de estilos externa existente y sitúe el punto de inserción entre las llaves ({ }) situadas detrás del selector correspondiente al estilo deseado.
Haga clic en Generar estilo en el menú Estilos para abrir el cuadro de diálogo Generador de estilos.
Haga clic en Fondo en el panel izquierdo del cuadro de diálogo Generador de estilos.

En el panel derecho, aparecerá el cuadro de diálogo Fondo, Generador de estilos.

Nota:
El menú Estilos aparecerá cuando abra una hoja de estilos CSS externa para editarla. La opción Generar estilo del menú Estilos estará disponible cuando coloque el punto de inserción entre las llaves situadas detrás del selector de una regla de estilo.

Una clase de estilos CSS definida en una hoja de estilos externa puede aplicarse a un elemento del elemento <BODY> de una página Web (en este caso, incluyendo el propio elemento <BODY>) mediante la asignación del selector de estilo CSS como propiedad CLASS del elemento deseado.

Las opciones disponibles en la página Fondo del cuadro de diálogo Generador de estilos son:

Tareas

Elementos de interfaz de usuario

Color de fondo

Color
Establece el atributo BACKGROUND-COLOR para el estilo. Seleccione una opción en la lista desplegable o haga clic en el botón de puntos suspensivos (...) para abrir el cuadro de diálogo Selector de color y seleccionar colores adicionales. Por ejemplo, si selecciona Rojo, se insertará el siguiente código de marcado CSS:

BACKGROUND-COLOR: red
Transparente
Puede utilizar esta casilla para establecer transparent como valor del atributo BACKGROUND-COLOR. Si selecciona transparent, no podrá seleccionar un color de fondo. Se insertará la siguiente línea de código:

BACKGROUND-COLOR: transparent

Imagen de fondo

Imagen
Permite establecer la imagen de fondo que mostrará el estilo. Escriba una ruta de acceso y un nombre de archivo en el campo o haga clic en el botón de puntos suspensivos (...) para abrir el Selector de direcciones URL e ir a la ubicación de la imagen. Por ejemplo, si navega hasta una imagen denominada Background.bmp de la carpeta Imágenes, se insertará el siguiente código:

BACKGROUND-IMAGE: url (images/background.bmp)

Mosaico
Permite establecer los atributos de presentación en mosaico de la imagen de fondo asignada por el estilo. Las imágenes pueden disponerse en mosaico de muchas formas, tal y como se indica en la tabla siguiente.

Atributo de mosaico	Descripción
Mosaico en horizontal	La imagen se dispone en mosaico de izquierda a derecha en la página, no de arriba a abajo.
Mosaico en vertical	La imagen se dispone en mosaico de arriba a abajo.
Mosaico en ambas direcciones	La imagen se dispone en mosaico horizontal y verticalmente.
No disponer en mosaico	Deshabilita la disposición en mosaico; la imagen aparece en las ubicaciones especificadas por el valor de posición y no se repite.
<Sin establecer>	Ninguna opción elegida; no se agrega código al estilo.

Por ejemplo, si elige Disponer en mosaico en dirección horizontal, se insertará el siguiente marcado CSS:

BACKGROUND-REPEAT:repeat-x

Nota:
Los atributos de mosaico funcionan conjuntamente con los atributos de posición. Si establece la posición de la imagen, se aplicarán los atributos de mosaico en función de la posición inicial de la imagen en la página. Por ejemplo, si coloca una imagen en la esquina superior izquierda de una página y sólo crea un mosaico horizontal, la imagen se repetirá por todo el borde superior de la página.

Los atributos de mosaico funcionan conjuntamente con los atributos de posición. Si establece la posición de la imagen, se aplicarán los atributos de mosaico en función de la posición inicial de la imagen en la página. Por ejemplo, si coloca una imagen en la esquina superior izquierda de una página y sólo crea un mosaico horizontal, la imagen se repetirá por todo el borde superior de la página.

Desplazamiento
Establece el valor de atributo BACKGROUND-ATTACHMENT para la imagen de fondo que aplica este estilo. Seleccione un valor de la lista desplegable. Una imagen puede permanecer fija mientras se desplaza la página o puede desplazarse con el texto y las imágenes sobre el fondo. Puede seleccionar <Sin establecer> (ninguna opción elegida), Fondo de desplazamiento o Fondo fijo. Por ejemplo, si elige Fondo de desplazamiento, se insertará el siguiente marcado CSS:

BACKGROUND-ATTACHMENT:scrolling

Nota:

Si el atributo es <Sin establecer>, no se agregará código al estilo.

Nota:
Si el atributo es <Sin establecer>, no se agregará código al estilo.

Posición
Establece los atributos de posición para la imagen de fondo aplicada por el estilo. El valor de posición está relacionado con los atributos de mosaico. Si establece una posición para el fondo y no elige los atributos de mosaico, la imagen de fondo se fija en la posición especificada. Si establece una posición para el fondo y elige atributos de mosaico, se utiliza la posición como punto inicial para el atributo de mosaico.

Nota:
Debe seleccionar tanto los valores de posición horizontales como los verticales. Si especifica sólo un valor, el Editor de CSS muestra un nombre de propiedad no válido. Cuando seleccione valores de posición horizontal y vertical, se mostrará correctamente la propiedad como BACKGROUND-POSITION. Un ejemplo de declaración válida de posición del fondo es BACKGROUND-POSITION:left center.

Horizontal
Establece la posición horizontal de la imagen de fondo aplicada por el estilo. Puede seleccionar <Sin establecer> (ninguna opción elegida), Izquierda, Centro, Derecha o Personalizado. Si selecciona Personalizado, estarán disponibles los campos situados a la derecha de Personalizado. El valor predeterminado es 50%. Escriba un valor en el campo numérico y elija un incremento (px, pt, pc, mm, cm, in, em, ex o %) en la lista desplegable del campo de unidad. Si elige Personalizado y acepta los valores predeterminados, se insertará el siguiente marcado CSS:

BACKGROUND-POSITION:50%

Nota:

Si el atributo es <Sin establecer>, no se agregará código al estilo.
Vertical
Permite establecer la posición vertical de la imagen de fondo aplicada por el estilo. Seleccione una opción de la lista desplegable: <Sin establecer> (ninguna opción elegida), Izquierda, Centro, Derecha o Personalizado. Si selecciona Personalizado, estarán disponibles los campos situados a la derecha de Personalizado. El valor predeterminado es 50%. Escriba un valor en el campo numérico y elija una opción de unidad (px, pt, pc, mm, cm, in, em, ex o %) en la lista desplegable del campo de unidad. Si elige Personalizado y acepta los valores predeterminados, se insertará el siguiente marcado CSS:

BACKGROUND-POSITION:50%

Nota:

Si el atributo es <Sin establecer>, no se agregará código al estilo.
No utilizar imagen de fondo
Si esta opción está activada, se quitará la imagen de fondo de la página actual. Los atributos de Imagen no están disponibles en el cuadro de diálogo. Si se especificó una imagen para la página, se quitará la propiedad BACKGROUND-IMAGE del estilo después de hacer clic en Aceptar.