pro Seite ein anderes Hintergrundbild / via CSS gesteuert

  • Hallo zusammen


    Ausgangslage
    Ich bin an einer HTML Seite mit mehreren zusätzlichen Seiten. Zu jedem spez. Thema will ich jetzt das Hintergrundbild im HTML verändern (nicht body). Das neutrale Hintergrundbild für die index.html Seite, habe ich via CSS im html direkt angesteuert.


    CSS //
    html { background-image.......}



    Jetzt versuche ich die speziellen Seiten direkt anzusteuern, aber es nimmt keine CSS an. Ich habe versucht, die 'div' Attibut unterhalb html und head zu setzen, und das klappt soweit ..


    HTML//
    <html>
    <div id="draht">
    <head>
    </head>
    </div>
    <body>
    ...


    ...


    CSS//
    html, body #draht {background-image: url("bilder/hint........gif");}


    Aber sobald ich mehrere div Attribute im CSS setze, nimmt es mir immer nur das Letzte an, dh. es klappt doch nicht.


    Wenn ich das 'div' wie folgt anwähle, klappt gar nichts.


    CSS//
    #draht - geht nichts
    #draht html - auch nicht
    html#draht - auch nicht


    Wieso es nur geht, wenn ich den body erwähne, ist mir schleiherhaft, da ich das 'div' im HTML Doc ja nicht innerhalb des body gesetzt habe. ?(


    Kennt jemand das Problem? Ich wäre um jede Hilfe dankbar.


    Gruss
    Florin

  • Hallo und herzlich willkommen!


    Bitte informiere dich hierwie im Forum Beiträge korrekt formatiert werden.


    Zu deinem Problem:
    - <div> ist ein Element und kein Attribut :)
    - wenn, dann kommen div's nur in <body></body> herein! Alles was später auf der Webseite sichtbar sein soll steht im body. Warum hast du das um den <head> gelegt? ?(;)


    Kleiner Beispielcode:



    so baut man das auf. Bei weiteren Problemen gerne fragen! :)

  • @Phib S.


    Man soll keine Elemente, mit id's oder klassen zusammenlegen, soweit es sich machen lässt.. ;)


    Ich hoffe mal ich habe jetzt nix falsches gesagt ;)


    Übrigens.. wo isch schon am nörgeln bin.. 8)
    Bei deinem Beispiel, kann ich die von Basiii erwähnte Einrückung nicht finden :D:whistling:

  • Guten Morgen


    Vielen Dank für Eure schnelle Antwort und entschuldige, dass die Darstellung zu wünschen lässt. Ich versuche mich zu bessern.

    - wenn, dann kommen div's nur in <body></body> herein! Alles was später auf der Webseite sichtbar sein soll steht im body. Warum hast du das um den <head> gelegt?

    Da ich alles ausprobiert habe und es schlussendlich nur innerhalb des html, direkt vor dem head sichtbar war.

    Wenn man nicht mehr weiter weiss, versucht man doch alles. :whistling: Bei mir ist es auf jeden Fall so. Aber danke für die Info, dann weiss ich was ideal wäre :-)

    Wenn ich das div in den Body ziehe, dann erscheint es leider auch im Body.


    Ich finde die Lösung, das 'div' zwischen html und header zu setzen, auch überhaupt nicht logisch, aber leider ist es die einzige meiner dutzend Versuche, welche die Bilder/Gif's überhaupt sichtbar machen. Im Anhang habe ich zwei Beispiele mitgeschickt, damit jetzt hoffentlich klar ist, wie ich mir das so vorstelle. Leider wird, wenn ich mehrere CSS Verweise mache, nur die letzte genommen, dass heisst für mich, dass Element wird überhaupt nicht beachtet.


    CSS
    1. html, #filz {
    2. background-image: url("bilder/hintergrundfilz.gif");
    3. }
    4. html, #draht {
    5. background-image: url("bilder/hintergrunddraht.gif");
    6. }


    Ich könnte mir vorstellen, am Schluss gibt es eine ganz logische Erklärung. Nur leider sehe ich vor lauter Wald die Bäume nicht mehr.


    Vielen Dank für weiter Inputs.


    Florin

  • Durch hatml, #draht machst du das der Bereich html, dieses hintergrund bild hat und das der bereich draht den hintergrund hat..
    Ich glaube du hast deinem div einfach keine Breite/Höhe mitgegeben, wesshalb auchkein hintergrund da sein kann..


    Probier mal das hier


    Und bitte lies dir das mal duch:

    Nutzungsbestimmungen §2.10 schrieb:

    Vollzitate sind nicht erwünscht. Wenn du auf einen Beitrag Bezug nehmen möchtest, so zitiere lediglich relevante Stellen, falls nötig. Jegliche Vollzitate werden entfernt.

    :)

  • Deine divs sind leer und haben deshalb auch keine Fläche auf denen man das Hintergrundbild sehen könnte.
    kannst deinen divs ja mal per css eine height verpassen (breite brauchst du nicht die ist eh standardmäßig maximal),
    danach solltest du deine Bilder sehen können.

  • Ich habe jetzt die Breite und Höhe rein kopiert, aber das war nicht die Lösung.


    Das erste 'Div' wird ja nie angewendet, dass heisst die Seite übernimmt nur mein 'html', da die erste div (oder hier nur html) Anweisung von der Zweiten überdeckt wird. Das Element 'DIV' wird gar nicht genommen. Wenn ich die Breite wie im unteren Beispiel übernehme, schrumpft nur der Body.


    Die Lösung wird wohl in der Frage liegen, wieso ein html, (mit Komma) wirklich im CSS notwendig ist, das ich die Bilder sehe! Da die normale direkte Anweisung nicht funktioniert.




    Im Beispiel oben, haben sich nur die Body Einstellungen durch die Grösse/Breiten Angaben geändert, der Hintergrund wurde nicht übernommen.


    Was die Grösse oder Breite im html angeht, das Bild übernimmt doch im normalen die ganze Bildschrim Grösse? Oder sehe ich das falsch, da ich den index.html css body auch ohne Angaben mit einer Background-Color hinterlegt habe. Und das funktioniert ja.


    Die Frage ist, wie steuere ich eine Zusatz Anweisung in den HTML Bereich?

  • blöde Frage, wieso nutzt du überhaupt ein div? Man kann einem Element bei CSS 3 auch zwei unabhängige Hintergründe geben, d.h. du kannst deinem HTML einmal den Standard BG und einmal den Drahtbg mit repeat: x; oder so mitgeben, danach den body runterschieben.


    So könnt man es machen, und dann halt auf jeder Seite die backgrounds des HTML überschreiben.
    Also, einmal die Standard Css einfügen und drunter dann im head einen CSS Bereich, der die eigtl. Bilder definiert.

  • Irgendwie habe ich das Gefühl, dass niemand richtig versteht wo der Schuh drückt.


    ich habe eine Standart Seite > homepage/index.html Seite und dann viele weiter html-Dateien.


    homepage/draht.html
    homepage/filz.html


    usw.


    Jetzt will ich pro html-Datei /draht.html oder /filz.html usw. ein anderes Hintergrund Bild.


    Wenn ich es im CSS direkt unter dem html mittels 'background' das Bild einfüge, haben alles das gleiche Hintergrund Bild. Also wie steuere ich die einzelnen html Dateien an? Ich dachte, ein 'DIV' Element wäre OK, aber es klappt nicht.


    Ist es wirklich so schwierig oder sehe ich den logischen Weg nicht.

  • Also - ich habe eine Möglichkeit gefunden, pro html - Datei habe ich eine neue CSS Datei eröffnet, der die ursprünglichen Hintergrund-Bilder überschreibt.


    Ob das die einfachste Lösung ist - keine Ahnung, aber immerhin funkt sie. :thumbsup:


    Danke an alle und ..... wer weiss, vielleicht hat ein anderer einmal die gleichen Probleme.

  • Ok, sorry echt nicht :D
    Ja, deine Lösung geht, aber geht noch performanter :p



    Auf jeder Seite änderst du jetzt Zeile 9 so wie du willst, Du kannst auch ein standart-bg-Bild in deiner style.css festlegen, dieser Wert wird dann überschrieben.


    Hoffe jetzt mal das das was du willst ;)


    Übrigens Suchfunktion hilft, wir hatten das erst neulich hier behandelt :)


    && zur Fehler-suche & Entwicklung lohnt es sich erstmal mit backgound-color: zu arbeiten..! :)

  • wolf - Vielen Dank für Deine neue Info. Es hat auch sofort funktioniert.


    Zu den anderen Punkten.
    1. Wenn ich die Lösung hätte, könnte ich auch einfacher in der Suchfunktion fragen!
    2. Wenn die Lösung erst kürzlich besprochen wurde, weshalb hat sie mir niemand mitgeteilt?


    Ich bin echt froh, dass es Foren gibt. Auch wenn nicht immer Lösungen da sind, man denkt die Vorschläge mit und kommt so dem Ziel näher.


    Bei diesem Forum (vielleicht nur bei dieser Frage) ist der Leitgedanke eher so - einfach einen Fehler als Lösung vorschlagen und dann kommt die Lösung :thumbsup:

  • So könnt man es machen, und dann halt auf jeder Seite die backgrounds des HTML überschreiben.
    Also, einmal die Standard Css einfügen und drunter dann im head einen CSS Bereich, der die eigtl. Bilder definiert.


    Hmm, wolfs Lösung war mit diesem Satz eigentlich gemeint, kam wohl nicht richtig an. Mein Fehler, danke wolf, für das Ausführlichere ;)