Freigeben über

Hintergrund, Dialogfeld "Stil-Generator"

  • Artikel

Aktualisiert: November 2007

Auf der Seite Hintergrund des Dialogfelds Stil-Generator können Sie Attribute für einen CSS-Stil (Cascading Stylesheet, CSS) festlegen, die eine Hintergrundfarbe oder ein Hintergrundbild definieren, wenn der Stil auf eine HTML-Seite oder eine HTML-Tabelle angewendet wird. Sie können diese Attribute entweder direkt HTML-Elementen zuweisen oder zu den CSS-Formatierungsregeln hinzufügen.

So wenden Sie die Hintergrundattribute direkt auf HTML-Elemente einer Seite an

  1. Öffnen Sie das HTML-Dokument in der Entwurfsansicht des HTML-Designers, und wählen Sie das zu formatierende Element aus.

  2. Klicken Sie zum Öffnen des Dialogfelds Stil-Generator im Menü Format auf die Option Stil.

  3. Klicken Sie im linken Bereich des Dialogfelds Stil-Generator auf Hintergrund.

    Das Dialogfeld Hintergrund, Stil-Generator wird im rechten Bereich angezeigt.

Wenn Sie in der Entwurfsansicht ausgewählte Elemente formatieren, werden CSS-Formatattribute inline in das HTML-Markup der Seite eingefügt. Wechseln Sie zur HTML-Ansicht, um die neu eingefügten Formatattribute zu überprüfen.

So fügen Sie einer in einem externen Stylesheet definierten CSS-Stilregel Hintergrundattribute hinzu

  1. Öffnen Sie ein vorhandenes externes Stylesheet, und platzieren Sie die Einfügemarke zwischen die geschweiften Klammern ({ }) hinter der Auswahl für den gewünschten Stil.

  2. Klicken Sie zum Öffnen des Dialogfelds Stil-Generator im Menü Stile auf die Option Stil erstellen.

  3. Klicken Sie im linken Bereich des Dialogfelds Stil-Generator auf Hintergrund.

    Das Dialogfeld Hintergrund, Stil-Generator wird im rechten Bereich angezeigt.

Hinweis:

Das Menü Stile wird angezeigt, wenn Sie ein externes CSS-Stylesheet zum Bearbeiten öffnen. Wenn Sie die Einfügemarke zwischen die geschweiften Klammern hinter der Auswahl für eine Stilregel platzieren, wird im Menü Stile die Option Stil erstellen angezeigt.

Eine in einem externen Stylesheet definierte CSS-Stilklasse kann auf ein Element im <BODY>-Element einer Webseite (in diesem Fall auch auf das <BODY>-Element selbst) angewendet werden, indem Sie die CSS-Stilauswahl als CLASS-Eigenschaft für das entsprechende Element zuweisen.

Die folgenden Optionen sind auf der Seite Hintergrund im Dialogfeld Stil-Generator verfügbar.

Aufgaben

UI-Elemente

Hintergrundfarbe

  • Farbe
    Legt das BACKGROUND-COLOR-Attribut für den Stil fest. Wählen Sie in der Dropdownliste eine Option aus, oder klicken Sie auf die Schaltfläche mit den Auslassungszeichen (...), um das Dialogfeld Farbauswahl zu öffnen und weitere Farben auszuwählen. Wenn Sie z. B. Rot auswählen, wird das folgende CSS-Markup eingefügt:

    BACKGROUND-COLOR: red

  • Transparent
    Mit diesem Kontrollkästchen wird das BACKGROUND-COLOR-Attribut auf den Wert transparent festgelegt. Wenn Sie transparent aktivieren, können Sie keine Hintergrundfarbe auswählen. Der folgende Code wird eingefügt:

    BACKGROUND-COLOR: transparent

Hintergrundbild

  • Bild
    Legt das Bild fest, das von der Formatvorlage im Hintergrund angezeigt wird. Geben Sie einen Pfad und einen Dateinamen in das Feld ein, oder klicken Sie auf die Schaltfläche mit den Auslassungszeichen (...), um die URL-Auswahl zu öffnen und den Speicherort des Bildes auszuwählen. Wenn Sie z. B. ein Bild mit dem Namen Background.bmp im Ordner Bilder auswählen, wird der folgende Code eingefügt:

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

  • Unterteilung
    Legt die Anordnungsattribute für das von der Formatvorlage zugewiesene Hintergrundbild fest. Bilder können auf verschiedene Art angeordnet werden, wie in der folgenden Tabelle dargestellt.

    Unterteilungsattribut

    Beschreibung

    Untereinander

    Das Bild wird von links nach rechts über die Seite angeordnet, jedoch nicht von oben nach unten.

    Nebeneinander

    Das Bild wird nur von oben nach unten angeordnet.

    Untereinander und nebeneinander

    Das Bild wird sowohl horizontal als auch vertikal angeordnet.

    Keine Unterteilung

    Deaktiviert das Anordnen. Das Bild wird entsprechend den Positionswerten angezeigt und nicht wiederholt.

    <Nicht gesetzt>

    Keine Option ausgewählt. Der Formatvorlage wird kein Code hinzugefügt.

    Wenn Sie z. B. Untereinander auswählen, wird das folgende CSS-Markup eingefügt:

    BACKGROUND-REPEAT:repeat-x

    Hinweis:

     Die Attribute für die Unterteilung werden in Verbindung mit den Attributen für die Position verwendet. Wird eine Position für das Bild festgelegt, basieren die Anordnungsattribute auf der Anfangsposition des Bildes auf der Seite. Wenn Sie z. B. ein Bild in der linken oberen Ecke einer Seite positionieren und nur horizontal anordnen, wird das Bild am oberen Rand der Seite wiederholt.

  • Bildlauf
    Legt das BACKGROUND-ATTACHMENT-Attribut für das durch den Stil zugewiesene Hintergrundbild fest. Wählen Sie in der Dropdownliste einen Wert aus. Ein Bild kann bei einem Bildlauf der Seite entweder fixiert sein oder sich zusammen mit dem Text und den über dem Hintergrund befindlichen Bildern bewegen. Wählen Sie <Nicht festgelegt> (keine Option ausgewählt), Bildlauf im Hintergrund oder Fixierter Hintergrund aus. Wenn Sie z. B. Bildlauf im Hintergrund auswählen, wird das folgende CSS-Markup eingefügt:

    BACKGROUND-ATTACHMENT:scrolling

    Hinweis:

    Wenn das Attribut <Nicht festgelegt> lautet, wird dem Stil kein Code hinzugefügt.

  • Position
    Legt die Positionsattribute für das von der Formatvorlage zugewiesene Hintergrundbild fest. Der Positionswert steht mit den Anordnungsattributen in Beziehung. Wenn Sie eine Position für den Hintergrund festlegen und keine Anordnungsattribute auswählen, wird das Hintergrundbild an der angegebenen Position fixiert. Wenn Sie eine Position für den Hintergrund festlegen und Anordnungsattribute auswählen, wird die Position als Anfangspunkt für das Anordnungsattribut verwendet.

    Hinweis:

    Sowohl horizontale als auch vertikale Positionswerte müssen festgelegt werden. Wenn Sie nur einen Wert festlegen, wird im CSS-Editor ein ungültiger Eigenschaftenname angezeigt. Wenn Sie sowohl horizontale als auch vertikale Positionswerte auswählen, wird die Eigenschaft ordnungsgemäß als BACKGROUND-POSITION angezeigt. Ein Beispiel für eine gültige Deklaration einer "Background-Position" ist BACKGROUND-POSITION:left center.

  • Horizontal
    Legt die horizontale Position für das von der Formatvorlage zugewiesene Hintergrundbild fest. Wählen Sie <Nicht festgelegt> (Keine Option ausgewählt), Links, Zentriert, Rechts oder Benutzerdefiniert aus. Wenn Sie Benutzerdefiniert auswählen, sind die Felder rechts neben Benutzerdefiniert verfügbar. Der Standardwert ist 50%. Geben Sie im Zahlenfeld einen Wert ein, und wählen Sie in der Dropdownliste neben dem Feld für die Maßeinheit eine Schrittweite aus (px, pt, pc, mm, cm, in, em, ex oder %). Wenn Sie Benutzerdefiniert auswählen und die Standardwerte übernehmen, wird das folgende CSS-Markup eingefügt:

    BACKGROUND-POSITION:50%

    Hinweis:

    Wenn das Attribut <Nicht festgelegt> lautet, wird dem Stil kein Code hinzugefügt.

  • Vertikal
    Legt die vertikale Position für das von der Formatvorlage zugewiesene Hintergrundbild fest. Wählen Sie eine Option aus der Dropdownliste aus: <Nicht festgelegt> (Keine Option ausgewählt), Links, Zentriert, Rechts oder Benutzerdefiniert. Wenn Sie Benutzerdefiniert auswählen, sind die Felder rechts neben Benutzerdefiniert verfügbar. Der Standardwert ist 50%. Geben Sie im Zahlenfeld einen Wert ein, und wählen Sie in der Dropdownliste neben dem Feld für die Maßeinheit eine Option aus (px, pt, pc, mm, cm, in, em, ex oder %). Wenn Sie Benutzerdefiniert auswählen und die Standardwerte übernehmen, wird das folgende CSS-Markup eingefügt:

    BACKGROUND-POSITION:50%

    Hinweis:

    Wenn das Attribut <Nicht festgelegt> lautet, wird dem Stil kein Code hinzugefügt.

  • Kein Hintergrundbild verwenden
    Wenn dies aktiviert ist, wird das Hintergrundbild von der aktuellen Seite entfernt. Die Bildattribute sind im Dialogfeld nicht verfügbar. Wenn für die Seite ein Bild festgelegt wurde, wird die BACKGROUND-IMAGE-Eigenschaft aus dem Stil entfernt, nachdem Sie auf OK geklickt haben.

Siehe auch

Konzepte

Übersicht über das Arbeiten mit CSS

Referenz

Text, Dialogfeld "Stil-Generator"

Schriftart, Dialogfeld "Stil-Generator"

Position, Dialogfeld "Stil-Generator"

Layout, Dialogfeld "Stil-Generator"

Konturen, Dialogfeld "Stil-Generator"

Listen, Dialogfeld "Stil-Generator"

Andere, Dialogfeld "Stil-Generator"

Dialogfeld "Farbauswahl"