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: 56.776   Beiträge: 429.822   Mitglieder: 28.527   Aktive Mitglieder: 53
                            Willkommen an unser neuestes Mitglied, McFrey72.

                            Online-Benutzer

                            Einklappen

                            255 Benutzer sind jetzt online. Registrierte Benutzer: 4, Gäste: 251.

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

                            Die neuesten Themen

                            Einklappen

                            • Sempervivum
                              Antwort auf Welchen Editor kommt bei euch zum Einsatz
                              Megabyte Ich benutze ebenfalls VS-Code und bin voll zufrieden. Was bei mir nicht richtig funktioniert ist der Debugger für PHP: Er hängt sich dauernd auf, so dass nichts mehr geht und es ist mir unklar, ob es an der Erweiterung liegt oder an Bedienungsfehlern meinerseits. Wie sind deine Erfahrungen...
                              Heute, 06:14
                            • Megabyte
                              Antwort auf Wie viele Websietenbesucher habt ihr?
                              Wie versprochen: Wenn ich die crawler aussortiert habe - was bleibt übrig:

                              Habe nun im Monat Dezember mein Besucherskript dahingehend erweitert dass er crawler und bots ausklammert und mittels
                              'session' abfrägt ob sich "Wiederholungstäter" auf meiner Page finden.
                              ...
                              Gestern, 23:18
                            • Megabyte
                              Antwort auf Welchen Editor kommt bei euch zum Einsatz
                              Mein Fazit:

                              Nachdem ich fast alle Editoren nun durchhabe bin ich bei vsCode geblieben. Warum?

                              Sehr gutes Highlighning über sehr viele Sprachen, komplett individuell konfigurierbar
                              (und zwar WIRKLICH komplett !!!), fertig integrierte EMMETs und SNIPPETs - auch frei...
                              Gestern, 22:55
                            • daniel5959
                              Antwort auf SSL-Zertifikat bzw. DNS Eintrag bei evanzo???
                              Hallo,

                              habe bei Evanzo diese Infos bei den Webhosting-Paketen und beim Linux vServer gefunden, siehe



                              Falls diese Infos von Evanzo und 1Blu stimmen, dann ist es so einfach wie bei Strato, ein Mausklick und das SSL-Zertifikat müsste eingerichtet sein - evtl. bis...
                              Gestern, 22:38
                            • McFrey72
                              Antwort auf SSL-Zertifikat bzw. DNS Eintrag bei evanzo???
                              Hallo,
                              stehe vor genau dem selben Dilemma: kein Plan!
                              Bist du mit deinem Ticket schon weiter gekommen? Ist ja noch relativ "warm", das Thema.
                              Der telefonischer Support von Evanzo ist leider genau dann erreichbar wenn ich selber arbeite. :-/
                              Wäre toll wenn du das erklärst...
                              Gestern, 21:31

                            Die neuesten Beiträge

                            Einklappen

                            • Sempervivum
                              Antwort auf Welchen Editor kommt bei euch zum Einsatz
                              Megabyte Ich benutze ebenfalls VS-Code und bin voll zufrieden. Was bei mir nicht richtig funktioniert ist der Debugger für PHP: Er hängt sich dauernd auf, so dass nichts mehr geht und es ist mir unklar, ob es an der Erweiterung liegt oder an Bedienungsfehlern meinerseits. Wie sind deine Erfahrungen...
                              Heute, 06:14
                            • Megabyte
                              Antwort auf Wie viele Websietenbesucher habt ihr?
                              Wie versprochen: Wenn ich die crawler aussortiert habe - was bleibt übrig:

                              Habe nun im Monat Dezember mein Besucherskript dahingehend erweitert dass er crawler und bots ausklammert und mittels
                              'session' abfrägt ob sich "Wiederholungstäter" auf meiner Page finden.
                              ...
                              Gestern, 23:18
                            • Megabyte
                              Antwort auf Welchen Editor kommt bei euch zum Einsatz
                              Mein Fazit:

                              Nachdem ich fast alle Editoren nun durchhabe bin ich bei vsCode geblieben. Warum?

                              Sehr gutes Highlighning über sehr viele Sprachen, komplett individuell konfigurierbar
                              (und zwar WIRKLICH komplett !!!), fertig integrierte EMMETs und SNIPPETs - auch frei...
                              Gestern, 22:55
                            • Mys87
                              SSL-Zertifikat bzw. DNS Eintrag bei evanzo???
                              Hallo zusammen,

                              da ein SSL-Zertifikat mittlerweile wohl Standard ist würde ich nun auch gerne eins einsetzen. Bin bei evanzo und da habe ich auch schon die Möglichkeit eines kostenloses Zertifikates über let's encrypt gefunden. Nun soll man ein DNS Eintrag erstellen und da komme ich...
                              15.01.2021, 18:13
                            • daniel5959
                              Antwort auf SSL-Zertifikat bzw. DNS Eintrag bei evanzo???
                              Hallo,

                              habe bei Evanzo diese Infos bei den Webhosting-Paketen und beim Linux vServer gefunden, siehe



                              Falls diese Infos von Evanzo und 1Blu stimmen, dann ist es so einfach wie bei Strato, ein Mausklick und das SSL-Zertifikat müsste eingerichtet sein - evtl. bis...
                              Gestern, 22:38
                            • McFrey72
                              Antwort auf SSL-Zertifikat bzw. DNS Eintrag bei evanzo???
                              Hallo,
                              stehe vor genau dem selben Dilemma: kein Plan!
                              Bist du mit deinem Ticket schon weiter gekommen? Ist ja noch relativ "warm", das Thema.
                              Der telefonischer Support von Evanzo ist leider genau dann erreichbar wenn ich selber arbeite. :-/
                              Wäre toll wenn du das erklärst...
                              Gestern, 21:31
                            • Joschiiie96
                              Jimdo - Problem mit Sprungmarke bei Onepager
                              Servus Community,

                              für das Geschäft eines Freundes habe ich einen kleinen Onepager mithilfe von Jimdo erstellt. Nachdem der Entwurf nun fast fertig ist, haben wir das Pro-Paket von Jimdo gekauft, da es erst damit möglich ist, die Menüpunkte mit individuellen Links zu verknüpfen (und...
                              21.01.2021, 21:24
                            • arnego2
                              Antwort auf Jimdo - Problem mit Sprungmarke bei Onepager
                              auf Jimdo sein Geschäft aufbauen, das ist sicher ein Weg Erfahrungen zu sammeln.

                              für €20 pro Monat, 240 pro Jahr bekommt man 2 Jahre VPS, mit Einrichtung plus Webseite, emails und allen drum herum. Eventuell ist da sogar ein Sectico SSL.
                              Für die Hälfte, also €120 bekommt man...
                              21.01.2021, 22:26
                            • daniel5959
                              Antwort auf Jimdo - Problem mit Sprungmarke bei Onepager
                              Nachtrag:

                              Wenn nur innerhalb der gleichen Seite verlinkt wird, dann genügt als Adresse des Links der betreffende Anker, z.B.

                              #sortiment

                              Hier habe ich eine Anleitung dazu von Jimdo gefunden, siehe

                              >> https://help.jimdo.com/hc/de/articles/1150...
                              21.01.2021, 22:18
                            • daniel5959
                              Antwort auf Jimdo - Problem mit Sprungmarke bei Onepager
                              Hallo,

                              im Quelltext taucht bei den Menülinks ein ...

                              HTML-Code:
                              target="_blank"
                              ... auf, also eine Anweisung an den Browser einen neuen Tab aufzumachen.

                              Ich arbeite jetzt nicht mit dem Jimdo-Baukasten.

                              Irgendwo beim Linksetzen gibt es wohl...
                              21.01.2021, 22:08
                            Lädt...
                            X