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.880   Beiträge: 430.743   Mitglieder: 28.628   Aktive Mitglieder: 43
                            Willkommen an unser neuestes Mitglied, Nightbird.

                            Online-Benutzer

                            Einklappen

                            160 Benutzer sind jetzt online. Registrierte Benutzer: 1, Gäste: 159.

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

                            Die neuesten Themen

                            Einklappen

                            • basti1012
                              Antwort auf Änderung an der CSS macht Probleme
                              @-moz-keyframes sowie @-webkit-keyframes brauch man eigentlich nicht.
                              Es reicht @keyframes
                              Man kann das natürlich ändern mit mehr Bildern , finde das aber etwas kompliziert.
                              Da gibt es einfacher Slideshows die sich leichter anpassen lassen.
                              Gestern, 17:27
                            • Nightbird
                              Änderung an der CSS macht Probleme
                              Als neues Forumsmitglied möchte ich mich gleich mit einer Frage an Euch wenden.
                              Bei der Programmierung von HTML geht's so halbwegs aber bei einer CSS habe ich so meine Schwieriegkeiten.
                              Dashalb suche ich mir im Web hauprsächlich Templates zusammen, die meinen Vorstellungen entsprechen....
                              Gestern, 17:01
                            • arnego2
                              Spammer in Editoren
                              Wer hat es gewußt? Das Nulled Wordpress Themes, so einige Plugins die modifiziert wurden auch Ostereier haben war bekannt.
                              Die
                              • html-cleaner.com
                              • html-online.com/editor/
                              • html5-editor.net
                              • htmlg.com
                              • … and others
                              Sind hier genannt: https://casparwre.de/blog/seo-scam/...
                              18.06.2021, 17:41
                            • Fridolin
                              Passendes Programm/Plugin für online Buchung
                              Hallo zusammen, ich brauche eure hilfe - und zwar baue ich eine Webseite für einen Freund. Es geht um eine Vermietung/ Verleih tageweise. Aktuell verwende ich Wix, überlege aber zu Wordpress zu wechseln. Mein Problem ist das passende Programm/Plugin für die online Buchung und Zahlung zu finden. Wix...
                              18.06.2021, 09:43
                            • daniel5959
                              Antwort auf htaccess - aus txt eine htaccess datei erstellen
                              Hallo,

                              falls der Server des Webspaces dem User die Rechte an der Datei entzogen hat, dann kann man ja den Support um Hilfe bitten.

                              Ich habe hin und wieder den Support bemühen müssen, wenn ich ein Problem nicht selber lösen konnte.

                              daniel5959
                              14.06.2021, 16:56

                            Die neuesten Beiträge

                            Einklappen

                            Lädt...
                            X