Ankündigung

Einklappen
Keine Ankündigung bisher.

Verschiedene Hintergrundbilder mit CSS?

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Verschiedene Hintergrundbilder mit CSS?

    Hallo.

    Ich hätte mal ne Frage.

    Ich bastel gerade an einer Homepage (habt Ihr Euch eh schon gedacht...)
    Die Seite ist thematisch in verschiedene Bereiche unterteilt, denen jeweils eine andere Farbe zugeteilt ist. Gestartet wird in einer Image-Map, in denen die Farben zu Beginn den Bereichen zugeteilt werden.

    Nun möchte ich mit Hilfe einer Datei "formate.css" erreichen, dass über verschiedene Klassen (blau, rot,...) den Seiten eines Bereiches ein Hintergrundbild in der entsprechenden Farbe zugeteilt wird.

    Ich krieg es zwar hin eine Hintergrundfarbe entsprechend zu hinterlegen, aber bei den Klassen mit den Bildern gibt es nur weißen Hintergrund...

    Könnt Ihr mir bitte helfen?

    Grüße

    Abalone
    Abalone

    "Nichts ist jemals einfach!"

  • #2
    AW: Verschiedene Hintergrundbilder mit CSS?

    Ein Link wäre hilfreich.

    hast du es schon so probiert?
    Code:
    .hintergrundRot {
       background: #ff0000 url(images/rot.jpg);
    }
    
    .hintergrundBlau {
       background: #0000ff url(images/blau.jpg);
    }
    mfg Bertel
    There are 10 types of people in the world.
    Those who understand binary and those who don´t.

    Visit Bertels´s Homepage

    Kommentar


    • #3
      AW: Verschiedene Hintergrundbilder mit CSS?

      Hi Bertel,

      link geht leider nicht, da noch gar nichts online ist.

      Der Inhalt von formate.css:
      body { font-family:Comic Sans MS,Verdana; font-size:100%; color:#FFFFFF; }
      body.blau { background-image:url(../pics/021_bg_tile.GIF) }
      body.ohne { background-color:"#000000"

      In der Seite habe ich so auf die css verwiesen:
      im header:
      <link rel="stylesheet" type="text/css" href="formate.css">
      und unten dann:
      <body class="ohne">

      und es klappt nur bei class="ohne", bei class="blau" bleibt alles weiß....
      Abalone

      "Nichts ist jemals einfach!"

      Kommentar


      • #4
        AW: Verschiedene Hintergrundbilder mit CSS?

        Stell es bitte online. Sonst kann ich nur raten.

        Das Bild ist vorhanden? Der Link stimmt?
        Mach alle geschwungenen Klammern zu. Mach am besten nach jedem Attribut einen ;. Nur zur sicherheit.
        There are 10 types of people in the world.
        Those who understand binary and those who don´t.

        Visit Bertels´s Homepage

        Kommentar


        • #5
          AW: Verschiedene Hintergrundbilder mit CSS?

          Zitat von Abalone Beitrag anzeigen
          body { font-family:Comic Sans MS,Verdana; font-size:100%; color:#FFFFFF; }
          body.blau { background-image:_url(../pics/021_bg_tile.GIF); }
          body.ohne { background-color:"#000000"; }
          Ich habe die Fehler Fettgedruckt makiert und zwischen "background-image: url" kommt ein Leerzeichen! Habs folgendermaßen makiert: _

          Und natürlich wie Bertel schon sagte Dateinamen genau überprüfen. Groß klein Schreibung usw...

          Mfg

          Kommentar


          • #6
            AW: Verschiedene Hintergrundbilder mit CSS?

            Hi,
            Zitat von powergold Beitrag anzeigen
            Ich habe die Fehler Fettgedruckt makiert
            welche Fehler? Die einzigen sind die fehlende geschweifte Klammer am Ende und die Anführungszeichen um den Farbwert. Das nicht vorhandene Leerzeichen und die Semikolons am Ende einer Deklaration sind keine Fehler.

            Abgesehen davon: "body.blau" und "body.ohne" ist doppelter Murks.
            Zum einen ist body einmalig und sollte ggfls. eine ID bekommen.
            Zum anderen ist "blau" ein bei Designänderung möglicherweise unpassender Name und "ohne" überflüssig, da man auch einfach body {} definieren kann.

            Gruß
            Ingo
            Ingo Webdesign

            Kommentar


            • #7
              AW: Verschiedene Hintergrundbilder mit CSS?

              Hi Ingo,

              der klassenname .blau ist gar net so unsinnig, da es mehrere Farben gibt.

              Ich hab die css edds verändert (.ohne flog raus und wurde oben integriert):

              body { font-family:Comic Sans MS,Verdana; font-size:100%; color:#FFFFFF; background-color:#000000; }
              body.blau { background-image: url(../pics/021_bg_tile.GIF) color:#FFFFFF; }
              body.lila { background-image: url(../pics/031_bg_tile.GIF) color:#FFFFFF; }
              body.rot { background-image: url(../pics/041_bg_tile.GIF) color:#FFFFFF; }
              body.orange { background-image: url(../pics/051_bg_tile.GIF) color:#FFFFFF; }
              body.gelb { background-image: url(../pics/061_bg_tile.GIF) color:#FFFFFF; }
              body.gruen { background-image: url(../pics/071_bg_tile.GIF) color:#FFFFFF; }
              body.schwarz { background-image: url(../pics/081_bg_tile.GIF) color:#FFFFFF; }
              body.grau { background-image: url(../pics/091_bg_tile.GIF) color:#FFFFFF; }
              body.blaugruen { background-image: url(../pics/101_bg_tile.GIF) color:#FFFFFF; }
              body.gold { background-image: url(../pics/111_bg_tile.GIF) color:#FFFFFF; }

              Die seite verhält sich jedoch nach wie vor nicht wie gewünscht.
              Ohne die Klasse sind die Seiten mit schwarzen hintergrund: OK
              mit .blau (z.B.) sind die Seiten mal Schwarz und mal weiß, aber nie mit bild! Wenn man dann im Browser wieder zurückkehrt auf ne Seite ohne Klasse ist die evtl auch mit weißem Hintergrund!

              Grüße

              Abalone
              Abalone

              "Nichts ist jemals einfach!"

              Kommentar


              • #8
                AW: Verschiedene Hintergrundbilder mit CSS?

                Hi,
                Zitat von Abalone Beitrag anzeigen
                der klassenname .blau ist gar net so unsinnig, da es mehrere Farben gibt.
                doch - weil Du ihn zum einen für ein InDividuelles Element verwendest und zum anderen weil Du dann bei einer Design ziemlich durcheinander kommen wirst, wenn "blau" auf einmal lieber "rot" sein soll. Auf meinen Seiten habe ich z.B. auch <body id="web"> und diese Seiten haben einen blauen Hintergrund. Nur bezeichnet der Name den Inhalt und nicht wie dieser gerade aussehen soll. Verstanden?

                Zitat von Abalone Beitrag anzeigen
                body { font-family:Comic Sans MS,Verdana; font-size:100%; color:#FFFFFF; background-color:#000000; }
                body.blau { background-image: url(../pics/021_bg_tile.GIF) color:#FFFFFF; }
                Dir ist klar, dass im Ausdruck meist ein leeres Blatt herauskommen wird, da Hintergrund(bilder) i.d.R. nicht mit gedruckt werden?

                Zitat von Abalone Beitrag anzeigen
                mit .blau (z.B.) sind die Seiten mal Schwarz und mal weiß, aber nie mit bild!
                kein Wunder, wenn Du eine ungültige Angabe zu background-image machst. Bedenke, dass alles bis zu einem Semikolon oder "}" diese Eigenschaft definiert.

                Gruß
                Ingo
                Ingo Webdesign

                Kommentar


                • #9
                  AW: Verschiedene Hintergrundbilder mit CSS?

                  Zitat von Ingo Beitrag anzeigen
                  Auf meinen Seiten habe ich z.B. auch <body id="web"> und diese Seiten haben einen blauen Hintergrund. Nur bezeichnet der Name den Inhalt und nicht wie dieser gerade aussehen soll. Verstanden?
                  Naja, wie du ja siehst habe ich mehrere Farben verwendet, die entsprechenden Bilder sind ein eben dieser Farbe gehalten. So kann ich durch ändern der Klasse von .blau zu .rot ganz schnell die frabe der Seite wechseln.
                  Andere Einstellungen als die farbe habe ich im moment net...

                  Zitat von Ingo Beitrag anzeigen
                  Dir ist klar, dass im Ausdruck meist ein leeres Blatt herauskommen wird, da Hintergrund(bilder) i.d.R. nicht mit gedruckt werden?
                  Die Seite soll man sich ja auch im Netz anschauen und net ausdrucken! :-))

                  Zitat von Ingo Beitrag anzeigen
                  kein Wunder, wenn Du eine ungültige Angabe zu background-image machst. Bedenke, dass alles bis zu einem Semikolon oder "}" diese Eigenschaft definiert.
                  Edds hab ich begriffen, dass da noch ";" gefehlt hat. Korrigiert und Funktioniert!!

                  Danke!
                  Abalone

                  "Nichts ist jemals einfach!"

                  Kommentar


                  • #10
                    AW: Verschiedene Hintergrundbilder mit CSS?

                    Hi,
                    Zitat von Abalone Beitrag anzeigen
                    Naja, wie du ja siehst habe ich mehrere Farben verwendet, die entsprechenden Bilder sind ein eben dieser Farbe gehalten. So kann ich durch ändern der Klasse von .blau zu .rot ganz schnell die frabe der Seite wechseln.
                    Du wirst doch aber wohl die Farben entsprechend bestimmter Inhalte gewählt haben, oder etwa nur chaotisch?

                    Zitat von Abalone Beitrag anzeigen
                    Die Seite soll man sich ja auch im Netz anschauen und net ausdrucken! :-))
                    Aber wenn jemand sie mal ausdruckt, wird er sich ärgern. Dabei könntest Du das über entsprechende Angaben @media print ganz leicht vermeiden.

                    Gruß
                    Ingo
                    Ingo Webdesign

                    Kommentar


                    • #11
                      AW: Verschiedene Hintergrundbilder mit CSS?

                      Also prinzipiell stehen für verschiedene Inhaltsbereiche bestimmte Farben, aber eigentlich mehr nach optischen Gesichtspunkten. Alle Seiten werden durch ein grafisches Element miteinander verbunden. Durch ein Image Map auf der zweiten Seite werden die inhaltlichen Bereiche mit Farben verknüpft, die dann auf den jeweiligen Seiten mitsamt dem grafischen Element wiederkehren.

                      Diese zweite Seite besteht haupsächlich aus dem Bild mit der Map. Auf dem Bild ist ein großes Hexagon mit mehreren Unterteilungen zu sehen. Die Sechs Hauptfarben blau, lila, rot, orange, gelb und grün sind dort so zu sagen als Farbkreis angeordnet, wie er auch bei der subtraktiven Farbmischung entstehen könnte.

                      Das Ganze soll dazu dienen, dass ein Besucher schon an der Farbe der einzelnen Seiten erkennen soll, in welchem Bereich er sich befindet.

                      Da ich aber die Zuordnung ja gut kenne, tue ich mich mit den Farbnamen in der css leichter, da sie kürzer sind als die Bezeichnungen der Bereiche und ich mag Abkürzungen nur dann wenn sie nicht vermeidbar sind.

                      Zum Ausdrucken:
                      Wer auch immer meine Seite (wenn Sie dann mal fertig sein wird) ausdrucken möchte, macht dies besser ohne die Hintergrundbilder (oder besser Grafiken), denn obwohl die Seite für meine Verhältnisse relativ bunt wird, ist die Haupfarbe doch SCHWARZ!! So grob geschätzt bestehen die Hintergründe so ca. zu 85% aus Schwarz, der Rest sind die Farben!

                      Abalone

                      "Nichts ist jemals einfach!"

                      Kommentar


                      • #12
                        AW: Verschiedene Hintergrundbilder mit CSS?

                        Hi,
                        Zitat von Abalone Beitrag anzeigen
                        Das Ganze soll dazu dienen, dass ein Besucher schon an der Farbe der einzelnen Seiten erkennen soll, in welchem Bereich er sich befindet.
                        dann verwende IDs, die die Bereiche und nicht die Farben bezeichnen.


                        Zitat von Abalone Beitrag anzeigen
                        Zum Ausdrucken:
                        Wer auch immer meine Seite (wenn Sie dann mal fertig sein wird) ausdrucken möchte, macht dies besser ohne die Hintergrundbilder (oder besser Grafiken), denn obwohl die Seite für meine Verhältnisse relativ bunt wird, ist die Haupfarbe doch SCHWARZ!!
                        und was passiert dann? Weisse Schrift auf weissem Grund - oder falls doch mal jemand den Hintergrund mitdruckt, ist die Tinte schnell leer...
                        Beides ist äußerst ärgerlich.

                        Gruß
                        Ingo
                        Ingo Webdesign

                        Kommentar


                        • #13
                          AW: Verschiedene Hintergrundbilder mit CSS?

                          Also von den Farbnamen bringst Du mich net ab!



                          Die Sache mit dem Ausdrucken scheint Dir echt am Herzen zu liegen. Ich nehme mal an das hängt irgendwie mit der Barrierefreiheit zusammen..
                          Da wir sozusagen Kollegen sind/waren, greife ich aus diesem Grunde Deine Idee gerne auf. Hab bei SELFHTML schon über css und verschiedene Medien gelesen, bin mir aber nicht sicher wie ich meine Seiten für mediarint umsetzen soll....
                          Abalone

                          "Nichts ist jemals einfach!"

                          Kommentar


                          • #14
                            AW: Verschiedene Hintergrundbilder mit CSS?

                            Hi,
                            Zitat von Abalone Beitrag anzeigen
                            bin mir aber nicht sicher wie ich meine Seiten für mediarint umsetzen soll....
                            einfach so:
                            HTML-Code:
                            body { font:100.1% Verdana, sans-serif; color:white; background:black; }
                            body#blau { background-image: url(../pics/021_bg_tile.GIF); }
                            
                            @media print {
                              body, body#blau { color:black; background:white; }
                            }
                            Gruß
                            Ingo
                            Ingo Webdesign

                            Kommentar

                            homepage-forum.de - Hilfe für Webmaster! Statistiken

                            Einklappen

                            Themen: 57.089   Beiträge: 432.164   Mitglieder: 29.279   Aktive Mitglieder: 38
                            Willkommen an unser neuestes Mitglied, Grufty.

                            Online-Benutzer

                            Einklappen

                            218 Benutzer sind jetzt online. Registrierte Benutzer: 2, Gäste: 216.

                            Mit 3.502 Benutzern waren am 23.01.2020 um 17:20 die meisten Benutzer gleichzeitig online.

                            Die neuesten Themen

                            Einklappen

                            • daniel5959
                              Gaspreise - gut wer Energie auf Vorrat lagern kann
                              Hallo,

                              jetzt sind alle Leute gut dran, die ihre Heizenergie im eigenen Haus lagern können und schon im Frühjahr Heizöl bestellt haben, sie müssen sich keine Sorgen um die Gaspreissteigerungen der kommenden Monate machen.

                              Bisher waren die Gaskunden gut dran, sie haben sich...
                              24.06.2022, 01:37
                            • Grufty
                              Handydarstellung
                              In der Handydarstellung meiner Homepage fehlt neuerdings das Menue. War bisher ok. Sonst alles ok.

                              Problem durch sehr prompte Hilfe durch IN MEDIA gelöst!
                              Es lag am COUNTER CODE.
                              22.06.2022, 09:04
                            • Sprueche
                              LustigX.de - Lustige Bilder & witzige Memes
                              Hallo liebe Leute,

                              ich will Euch ein neues Projekt von mir vorstellen. Es handelt sich um "LustigX.de". Auf der Webseite werden von Mitgliedern "Lustiges/Witziges" gepostet. Du kannst gerne ein Teil der Community werden und selber "Lustiges/Witziges" posten....
                              21.06.2022, 02:08
                            • daniel5959
                              Energiewende mit günstigem Ökostrom und Wärmepumpe
                              Hallo,

                              meine Berechnung für eine persönliche Energiewende.

                              A) Grob geschätzt für mein kleines Häuschen rund 850 Liter Heizöl im langjährigen Mittel, das wären (Heizöl - Heizwert ca. 9,8 kWh pro Liter) 8.330 kWh und wenn ich diese Wärme mit einer Wärmepumpe und einer Jahresarbeitszahl
                              ...
                              18.06.2022, 02:45
                            • rene_j
                              Euere Meinung und Feedback zu meinem Projekt - van-reise.eu
                              Um welches Thema geht es?
                              Es geht primär um die Themen Reisen, Wandern, Geocaching, Trekking, Urban Exploration (Lost Places) und Übernachtungen im Freien (Wälder, Berge etc.) sowie Fahrzeug Anschaffung und Ausbau.

                              Das Projekt steckt noch in Kinderschuhen.
                              Die Social-Media-Kanäle...
                              14.06.2022, 13:41

                            Die neuesten Beiträge

                            Einklappen

                            • Sprueche
                              Antwort auf SpruecheX.de - Sprüche, Zitate und Weisheiten
                              Wegen Social-Media und SEO.

                              Update: Neues Design ist online!...
                              26.06.2022, 22:51
                            • eloms
                              Antwort auf Feedback zur Überarbeitung meiner Homepage
                              Hallo

                              So, ich habe diverse Ändeungen vorgenommen und ein Zufallsbild auf der Startseite eingefügt. Klickt man auf den Link, wird das ausgewählte Bild grün angezeigt.
                              War für mich gar nicht so einfach da so umzusetzen.
                              Langsam wird die Seite fertig.

                              mfg
                              ...
                              26.06.2022, 05:47
                            • daniel5959
                              Gaspreise - gut wer Energie auf Vorrat lagern kann
                              Hallo,

                              jetzt sind alle Leute gut dran, die ihre Heizenergie im eigenen Haus lagern können und schon im Frühjahr Heizöl bestellt haben, sie müssen sich keine Sorgen um die Gaspreissteigerungen der kommenden Monate machen.

                              Bisher waren die Gaskunden gut dran, sie haben sich...
                              24.06.2022, 01:37
                            • ST747
                              Antwort auf Gaspreise - gut wer Energie auf Vorrat lagern kann
                              hi,

                              beim gas ist die lieferung derzeit gedrosselt, weil ein pumpe kaputt ist.

                              deshalb werden auch die gasspeicher nicht so gefüllt, wie geplant.

                              nach meinen informationen muss die pumpe von einer deutschen firma gewartet oder repariert werden. das geht aber nicht,...
                              25.06.2022, 13:48
                            • daniel5959
                              Antwort auf Gaspreise - gut wer Energie auf Vorrat lagern kann
                              Nachtrag 2:

                              Frage: Wie weit würde man mit maximal 256 TWh (= max. 256 Mrd. kWh) Gas kommen?



                              In den letzten 3 Monaten des Jahres - Oktober, November und Dezember - werden im Mittel 277 TWh an Gas verbraucht, d.h. die maximal gefüllten Gasspeicher wären am Jahresende...
                              25.06.2022, 05:53
                            • daniel5959
                              Antwort auf Gaspreise - gut wer Energie auf Vorrat lagern kann
                              Nachtrag:

                              Deutschland hat genau genommen keinen Gasvorrat, sondern nur einen Gaspuffer, um die Spitzen im Winter abzupuffern.



                              Also wenn die Erdgasspeicher ganz voll wären, dann würde es für 2 bis 3 Monate reichen, aber nur wenn in dieser Zeit weiterhin Gas...
                              25.06.2022, 00:15
                            • Grufty
                              Handydarstellung
                              In der Handydarstellung meiner Homepage fehlt neuerdings das Menue. War bisher ok. Sonst alles ok.

                              Problem durch sehr prompte Hilfe durch IN MEDIA gelöst!
                              Es lag am COUNTER CODE.
                              22.06.2022, 09:04
                            • Localfu
                              Antwort auf Handydarstellung
                              Hier eine Lösung von mir
                              Code:
                              var linkTitle = ['Startseite', 'Über mich', 'Aktuelles', 'Kontakt', 'Impressum'];
                              var linkURL = ['home.html', 'about.html', 'news.html', 'contact.html', 'impressum.html'];
                              var topnav;
                              document.addEventListener('DOMContentLoaded', ()=> {
                              ...
                              24.06.2022, 16:16
                            • Localfu
                              Antwort auf Handydarstellung
                              Hallo Grufty,
                              leider ist dein JavaScript-Code fehlerhaft und weisst viele Fehler auf:
                              Code:
                              jQuery.noConflict()(function($){$("<form id='mobilemenu' class='right2'><select /></form>").appendTo("#topnav"),$("<option />",{selected:"selected",value:"",value:"",text:"F"
                              ...
                              24.06.2022, 15:22
                            • daniel5959
                              Antwort auf SpruecheX.de - Sprüche, Zitate und Weisheiten
                              Hallo,

                              mich ärgern immer noch die aufs Foto geklatschten Texte.

                              Warum wird nicht einfach nur ein unifarbener Hintergrund verwendet, wenn das Foto eh nicht so wichtig ist?

                              Den Text könnte man besser ins Foto einbauen, siehe Beispiel



                              ...
                              23.06.2022, 22:58
                            Lädt...
                            X