Arrière-plan, boîte de dialogue Générateur de styles

Article
08/21/2008

Mise à jour : novembre 2007

La page Arrière-plan de la boîte de dialogue Générateur de styles permet de définir des attributs pour un style de feuille de style en cascade (CSS) qui déterminent une couleur ou une image d'arrière-plan lorsque le style est appliqué à une page HTML ou à un tableau. Vous pouvez appliquer ces attributs directement aux éléments HTML ou les ajouter aux règles de style CSS.

Pour appliquer des attributs d'arrière-plan directement aux éléments HTML de votre page

Ouvrez votre document HTML en mode Design dans le Concepteur HTML et sélectionnez l'élément à mettre en forme.
Cliquez sur Style dans le menu Format pour ouvrir la boîte de dialogue Générateur de styles.
Sélectionnez Arrière-plan dans le volet gauche de la boîte de dialogue Générateur de styles.

La boîte de dialogue Arrière-plan, Générateur de styles apparaît dans le volet droit.

Lorsque vous mettez en forme des éléments sélectionnés en mode Design, les attributs de style CSS sont insérés en ligne dans le code HTML de votre page. Passez en mode HTML afin de vérifier les nouveaux attributs de style qui ont été insérés.

Pour ajouter des attributs d'arrière-plan à une règle de style CSS définie dans une feuille de styles externe

Ouvrez une feuille de style externe existante et placez le point d'insertion entre les accolades ({ }) qui suivent le sélecteur du style souhaité.
Cliquez sur Générer un style dans le menu Styles pour ouvrir la boîte de dialogue Générateur de styles.
Sélectionnez Arrière-plan dans le volet gauche de la boîte de dialogue Générateur de styles.

La boîte de dialogue Arrière-plan, Générateur de styles apparaît dans le volet droit.

Remarque :
Le menu Styles apparaît lorsque vous ouvrez une feuille de style CSS externe pour la modifier. Dans le menu Styles, l'option Générer un style devient disponible lorsque vous placez le point d'insertion entre les accolades qui suivent le sélecteur d'une règle de style.

Une classe de style CSS définie dans une feuille de style externe peut être appliquée à un élément compris dans l'élément <BODY> d'une page Web (ici, également dans l'élément <BODY> lui-même) en assignant le sélecteur de style CSS à l'élément en tant que propriété CLASS.

Les options disponibles dans la page Arrière-plan du Générateur de styles sont les suivantes.

Tâches

Éléments d'interface

Couleur d'arrière-plan

Couleur
Définit l'attribut BACKGROUND-COLOR pour le style. Sélectionnez une option dans la liste déroulante ou cliquez sur le bouton de sélection (...) pour ouvrir la boîte de dialogue Sélecteur de couleurs et sélectionnez d'autres couleurs. Par exemple, si vous sélectionnez Rouge, le balisage CSS suivant est inséré :

BACKGROUND-COLOR: red
Transparent
Cette case à cocher est utilisée pour attribuer la valeur transparent à l'attribut BACKGROUND-COLOR. Si vous sélectionnez transparent, vous ne pouvez pas sélectionner de couleur d'arrière-plan. Le code suivant est inséré :

BACKGROUND-COLOR: transparent

Image d'arrière-plan

Image
Définit l'image que le style affichera à l'arrière-plan. Entrez un chemin et un nom de fichier dans le champ ou cliquez sur le bouton de sélection (...) afin d'ouvrir le Sélecteur d'URL et d'accéder à l'emplacement de l'image. Par exemple, si vous naviguez jusqu'à une image nommée Background.bmp dans le dossier Images, le code suivant sera inséré :

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

Mosaïque
Définit les attributs de mosaïque de l'image d'arrière-plan assignés par le style. Les images peuvent être disposées en mosaïque de diverses manières, comme le montre le tableau suivant.

Attribut de mosaïque	Description
Mosaïque dans le sens horizontal	L'image est disposée en mosaïque de gauche à droite sur la page, et non de haut en bas.
Mosaïque dans le sens vertical	L'image est disposée en mosaïque de haut en bas une fois.
Mosaïque dans les deux sens	L'image est disposée en mosaïque à la fois horizontalement et verticalement.
Ne pas réorganiser	Désactive la mosaïque ; l'image apparaît aux emplacements spécifiés par la valeur de position et n'est pas répétée.
<Non défini>	Aucune option choisie ; aucun code n'est ajouté au style.

Par exemple, si vous choisissez Mosaïque dans le sens horizontal, le balisage CSS suivant est inséré :

BACKGROUND-REPEAT:repeat-x

Remarque :
Les attributs de Mosaïque fonctionnent en conjonction avec les attributs de Position. Si vous positionnez l'image, les attributs de mosaïque sont appliqués en fonction de la position de début de l'image sur la page. Par exemple, si vous positionnez une image dans l'angle supérieur gauche d'une page et créez une mosaïque horizontale uniquement, l'image sera répétée le long du bord supérieur de la page.

Les attributs de Mosaïque fonctionnent en conjonction avec les attributs de Position. Si vous positionnez l'image, les attributs de mosaïque sont appliqués en fonction de la position de début de l'image sur la page. Par exemple, si vous positionnez une image dans l'angle supérieur gauche d'une page et créez une mosaïque horizontale uniquement, l'image sera répétée le long du bord supérieur de la page.

Défilement
Définit l'attribut BACKGROUND-ATTACHMENT de l'image d'arrière-plan appliqué par le style. Sélectionnez une valeur dans la liste déroulante. Une image peut soit rester fixe lorsque la page défile, soit défiler avec le texte et les images par-dessus l'arrière-plan. Sélectionnez <Non défini> (aucune option choisie), Arrière-plan déroulant ou Arrière-plan fixe. Par exemple, si vous choisissez Arrière-plan déroulant, le balisage CSS suivant est inséré :

BACKGROUND-ATTACHMENT:scrolling

Remarque :

Lorsque l'attribut est <Non défini>, aucun code n'est ajouté au style.

Remarque :
Lorsque l'attribut est <Non défini>, aucun code n'est ajouté au style.

Position
Définit les attributs de position de l'image d'arrière-plan appliqués par le style. La valeur de la position est liée aux attributs de mosaïque. Si vous définissez une position pour l'arrière-plan et ne choisissez pas d'attributs de mosaïque, l'image d'arrière-plan est fixée à la position spécifiée. Si vous définissez une position pour l'arrière-plan et choisissez des attributs de mosaïque, la position sert de point de départ pour l'attribut de mosaïque.

Remarque :
Vous devez sélectionner à la fois la valeur horizontale et la valeur verticale. Si vous ne spécifiez qu'une seule valeur, l'Éditeur CSS affiche un nom de propriété non valide. Lorsque vous sélectionnez les deux valeurs de position, horizontale et verticale, la propriété s'affiche correctement comme BACKGROUND-POSITION. Exemple d'une déclaration de position d'arrière-plan valide : BACKGROUND-POSITION:left center.

Vous devez sélectionner à la fois la valeur horizontale et la valeur verticale. Si vous ne spécifiez qu'une seule valeur, l'Éditeur CSS affiche un nom de propriété non valide. Lorsque vous sélectionnez les deux valeurs de position, horizontale et verticale, la propriété s'affiche correctement comme BACKGROUND-POSITION. Exemple d'une déclaration de position d'arrière-plan valide : BACKGROUND-POSITION:left center.

Horizontal
Définit la position horizontale de l'image d'arrière-plan appliquée par le style. Sélectionnez <Non défini> (aucune option choisie), Gauche, Centre, Droit ou Personnalisé. Si vous sélectionnez Personnalisé, les champs à droite de Personnalisé sont disponibles. La valeur par défaut est 50%. Entrez une valeur dans le champ numérique et choisissez un incrément (px, pt, pc, mm, cm, in, em, ex ou %) dans la liste déroulante du champ unité. Par exemple, si vous choisissez Personnalisé et acceptez les valeurs par défaut, le balisage CSS suivant est inséré :

BACKGROUND-POSITION:50%

Remarque :

Lorsque l'attribut est <Non défini>, aucun code n'est ajouté au style.
Vertical
Définit la position verticale de l'image d'arrière-plan appliquée par le style. Sélectionnez une option dans la liste déroulante : <Non défini> (aucune option choisie), Gauche, Centre, Droit ou Personnalisé. Si vous sélectionnez Personnalisé, les champs à droite de Personnalisé sont disponibles. La valeur par défaut est 50%. Entrez une valeur dans le champ numérique et choisissez une option d'unité (px, pt, pc, mm, cm, in, em, ex ou %) dans la liste déroulante du champ unité. Par exemple, si vous choisissez Personnalisé et acceptez les valeurs par défaut, le balisage CSS suivant est inséré :

BACKGROUND-POSITION:50%

Remarque :

Lorsque l'attribut est <Non défini>, aucun code n'est ajouté au style.
Ne pas utiliser d'image d'arrière-plan
Lorsque vous sélectionnez Ne pas utiliser d'image d'arrière-plan, l'image d'arrière-plan est supprimée de la page en cours. Les attributs de l'image ne sont pas disponibles dans cette boîte de dialogue. Si une image a déjà été spécifiée pour la page, la propriété BACKGROUND-IMAGE est supprimée du style lorsque vous cliquez sur OK.