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.721   Beiträge: 429.266   Mitglieder: 28.477   Aktive Mitglieder: 45
                            Willkommen an unser neuestes Mitglied, durchstarter.

                            Online-Benutzer

                            Einklappen

                            215 Benutzer sind jetzt online. Registrierte Benutzer: 8, Gäste: 207.

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

                            Die neuesten Themen

                            Einklappen

                            Die neuesten Beiträge

                            Einklappen

                            • shamshaga
                              Wie kann ich eine Website auf einem NodeJS Server hosten?
                              Moin,

                              ich habe vor kurzem einen NodeJS Server von DanBothosting kostenlos bekommen.
                              Ich habe eine kleine Testwebsite mit dem Mobirise Website Builder zusammengestellt. Ich weiss das es unzählige FreeHoster gibt, die sowas anbieten, wo man direkt weiss, wie man die Website hostet....
                              Heute, 16:55
                            • admin
                              WhatsApp Business für Unternehmen
                              Hallo,

                              weiter geht es mit den Corona-Maßnahmen zur Digitalen Erreichbarkeit...

                              Wir planen evtl. die Nutzung von WhatsApp Business - als Zielnummer soll unsere Firmen-Festnetznummer genutzt werden

                              Hier meine Fragen dazu:

                              1. Wie meldet man eine Festnetznummer...
                              Heute, 13:37
                            • arnego2
                              Antwort auf WhatsApp Business für Unternehmen
                              Ich nutze Whatsapp als Kontakt, plus Telegram und auch Skype wenn es denn sein muss. Business brauch ich nicht, sehe auch wenig Sinn drin....
                              Heute, 15:10
                            • cheeseburger24
                              Wie findet ihr das Design?
                              Es ist nur ein Vorentwurf, ich weiß dass ich noch vieles zu verbessern habe. Trotzdem interessiert mich eure Meinung
                              Unter den Text kommt noch ein Butten der einen bei Klick nach unten führt, wo die wesentlichen Information sind. Ein Header wird ebenfalls noch ergänzt.
                              Wie gesagt das...
                              You do not have permission to view this gallery.
                              This gallery has 1 photos.
                              27.10.2020, 17:12
                            • cheeseburger24
                              Antwort auf Wie findet ihr das Design?
                              Die Webseite wird natürlich responsiv, ich habe mich jedoch erstmal an die mobile Version drangesetzt, da das Marketing später hauptsächlich in den sozialen Medien stattfinden wird. Daher werden wahrscheinlich die meisten Nutzer die Seite per Smartphone oder Tablet angucken.
                              LG
                              Heute, 10:44
                            • daniel5959
                              Antwort auf Wie findet ihr das Design?
                              Hallo,

                              für mobile Geräte finde ich es ok - allerdings habe ich kein Smartphone, sondern ein 17"-Notebook, ich habs gerne etwas größer.

                              daniel5959
                              Heute, 00:14
                            • silent
                              text-align
                              Guten Tag an alle,
                              nun ich bekomme es irgendwie nicht hin, dass der Text "Informationen" mittig ist (siehe Foto).

                              Mein HTML-Code sieht wie folgt aus:

                              HTML-Code:
                              <div class="inf" id="info">
                              <h1> Informationen </h1>
                              ...
                              26.10.2020, 15:23
                            • Testie
                              Antwort auf text-align
                              Hier sollte man flexbox verwenden.

                              https://t3n.de/news/flexbox-wofuer-t...wofuer-718520/
                              Gestern, 22:09
                            • silent
                              Antwort auf text-align
                              Guten Tag,
                              leider komme ich die Woche nicht mehr dazu, das alles zu testen, da ich noch andere Sachen erledigen muss. Ich würde es nächste Woche probieren und mich bei euch melden, ob es geklappt hat.
                              Dennoch möchte ich mich jetzt schon bedanken, dass Ihr euch zeigt genommen habt!...
                              Gestern, 16:16
                            • cheeseburger24
                              Antwort auf Wie findet ihr das Design?
                              Hab jetzt mich nochmal dran gesetzt und habe das hier mal gebastelt. ist eine mobile Ansicht, was meint ihr?
                              You do not have permission to view this gallery.
                              This gallery has 1 photos.
                              Gestern, 13:40
                            Lädt...
                            X