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.170   Beiträge: 432.150   Mitglieder: 29.549   Aktive Mitglieder: 45
                            Willkommen an unser neuestes Mitglied, [email protected].

                            Online-Benutzer

                            Einklappen

                            267 Benutzer sind jetzt online. Registrierte Benutzer: 2, Gäste: 265.

                            Mit 4.707 Benutzern waren am 12.01.2023 um 04:07 die meisten Benutzer gleichzeitig online.

                            Die neuesten Themen

                            Einklappen

                            Die neuesten Beiträge

                            Einklappen

                            • daniel5959
                              Antwort auf Otmar
                              Hallo,

                              habe das Programm HomepageFIX 2020 nicht, aber wie bei allen Programmen zum Erstellungen von Webseiten müssen die FTP-Angaben stimmen, damit das Programm die Dateien auch auf den Webspace hochladen kann.

                              Dafür müsste man wissen beim welchem Provider der Webspace ist,...
                              Heute, 16:35
                            • Otmar.spiss@gmail.com
                              Otmar
                              Ich kann HomepageFIX 2020, nicht veröffentlichen. Von seiten des Providers ist angeblich alles in Ordnung. Wer hat Erfahrung mit diesem Problem?
                              Heute, 11:24
                            • bdt600
                              Antwort auf Otmar
                              Ich würde mir an deiner Stelle nicht allzu große Hoffnungen machen, dass du hier Hilfe zu HomepageFIX 2020 bekommen wirst. Solche WYSIWYG-Editoren sind bei Leuten mit Ahnung meist verpönt, weil der HTML-Code, der am Ende raus kommt, (vorsichtig gesagt) nicht so dolle ist.
                              Heute, 14:22
                            • admin
                              Antwort auf Mail-Authentifizierung
                              Hallo Localfu,

                              voll krass, zum Glück haben wir noch uralte Verträge... Aber da wird es in Zukunft für eine Firma ja richtig teuer, wenn Sie alle Mitarbeiter mit E-Mail-Adressen versorgen will.

                              Wir arbeiten uns aktuell an die Lösung heran, ein User hier aus dem Forum hat...
                              Heute, 12:17
                            • admin
                              Mail-Authentifizierung
                              Hallo,

                              wir haben heute das erste Mal das Erlebnis gehabt, dass eine Firmenmail nicht zu einer Kundenadresse durchgekommen ist.

                              Die Empfänger-Adresse ist eine [email protected] Adresse, und Googlemail blockt wohl seit November 2022 nicht authentifizierte Domains.

                              Hier...
                              02.02.2023, 13:04
                            • Localfu
                              Antwort auf Mail-Authentifizierung
                              Hi admin,
                              bei IONOS gibt es Seit Ende 2022 Einschränkungen bei der Vergabe von E-Mails. Neue Standardverträge lassen nur eine E-Mailadresse zu(Jede weitere Adresse kostet mehr). Das ist bei den alten Verträgen noch vermeidbar.

                              Das ander Problem ist die Nutzung von E-Mailadressen...
                              Heute, 01:09
                            • arnego2
                              Antwort auf Lebensmittelpreise - die x-te Version
                              Tja da seit ihr gut dran, bei uns kommen 200Gr Butter auf ungefähr 6$. Da wir Butter nicht so häufig nutzen so 2 pro Jahr macht den Kohl nicht fetter....
                              Gestern, 21:38
                            • bodan
                              KeePass - Password-Manager :: welche Addons /Plugins verwendet ihr!?
                              Hallo u. guten Abend liebe Community

                              welche Keepass-Addons /Plugins verwendet ihr!?

                              Es gibt ja sehr viele Plugnis / Addons die die Funktionalitäten erweitern: welche verwendet ihr denn!?

                              Plugins für KeePass (hier eine Übersicht: https://keepass.info/plugins.h...
                              24.01.2023, 23:58
                            • eloms
                              Antwort auf KeePass - Password-Manager :: welche Addons /Plugins verwendet ihr!?
                              Hallo

                              Doch, kann man.
                              Ich verwende einen anderen PWM und der kennt nur einen Teil des PW und somit kann damit keiner etwas anfangen.
                              Und für wichtige Seite wie Banking oder Paypal verwende ich eine Authenticator App. Und die kann man nicht auslesen weil sie auf einem anderen...
                              Gestern, 20:00
                            • daniel5959
                              Antwort auf Lebensmittelpreise - die x-te Version
                              Hallo,

                              auch sonst ist vieles immer noch günstig bzw. wir wieder günstiger.

                              A) Einige Artikel (Eigenmarken) - Auszug aus meinem letzten Netto-Kassenzettel:

                              Scheuermilch (Reinigungsmittel) 750 ml für 0,89 Euro
                              Handcreme (Öko-Test "Sehr Gut") 125...
                              03.02.2023, 21:52
                            Lädt...
                            X