Eine horizontale Linie mit <hr> in css als bild mit wiederholung anzeigen?

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
  • daggel
    Newbie
    • 20.03.2023
    • 5

    Eine horizontale Linie mit <hr> in css als bild mit wiederholung anzeigen?

    Hallo,

    ich bin neu hier und Webseiten-Anfänger. Trotzdem möchte ich in einem HR-Tag mit Css ein Bild anzeigen, dass nur horizontal über die gesamte Seite wiederholt wird.
    HTML-Code:
      <!--<div id="bild2">      
    <img src="..\Bilder\TrennungTranparentQuer.jpeg">    
    </div>-->    
    
    <hr/>
    Das sind nur zwei meiner Versuche.

    #hr1
    {
    background-image: url("..\Bilder\TrennungTranparentQuer.png" ) repeat-x80%10%;
    /*display: block;
    background-repeat: repeat-x;
    height: 15px;*/
    }

    Weil in HTML nur das HR-Tag aktiv ist sieht das ganze so aus: grafik.png

    Es wird zwar die Linie gezeichnet, aber es gibt kein Bild geschweige eine Bildwiederholung. Auf einer Seite die zu ich zu Rate gezogen habe funktionierte das aber.

    Was läuft schief?

    Danke für Eure Hilfe

    daggel
    }

  • bdt600
    Meister
    • 14.04.2014
    • 309

    #2
    Crossposting: https://www.html-forum.de/threads/10812/#post-13700

    Kommentar

    • daggel
      Newbie
      • 20.03.2023
      • 5

      #3
      Hallo bdt600,

      Warum bist Du sauer? Keine Ahnung, aber gehören die Foren zusammen? ??????????

      Kommentar

      • bdt600
        Meister
        • 14.04.2014
        • 309

        #4
        Crossposting bedeutet, dass ein und dieselbe Frage in mehreren Foren oder Newsgroups gleichzeitig gestellt wird. Ein solches Verhalten wird von den meisten Helfern nicht toleriert, denn damit stellst Du einerseits die Kompetenz der Helfer jedes einzelnen Forums und Newsgroup in Frage und bewirkst zudem, dass ein zig-faches an Stunden aufgewendet wird, um nur ein einziges Problem zu lösen, denn überall werden sich die Helfer daran setzen, eine Lösung für Dich zu finden. Das ist ganz klar ein Missbrauch an dem kostenlosen und freiwilligen Support, der hier angeboten wird. Wenn Deine Frage klar und deutlich gestellt wurde, dann wirst Du ganz bestimmt innerhalb kürzester Zeit eine Antwort erhalten. Sollte dies auch nach mehreren Tagen nicht der Fall sein, dann versuche bitte die Frage besser zu formulieren. Falls Du dennoch in einem zweiten Forum posten solltest, erwähne bitte, dass Du die Frage schon woanders gestellt hast, und dass Du es tust, weil keine Lösung gefunden werden konnte.

        Kommentar

        • daggel
          Newbie
          • 20.03.2023
          • 5

          #5
          Ok, dass war mir nicht bewusst. Entschuldigung.

          Aber Danke, dass Du mir das mitgeteilt hast. Ist mir bisher noch nie passiert.

          Gruß

          daggel

          Kommentar

          • Testie
            König
            • 25.01.2013
            • 686

            #6
            Schon lustig. Die gleichen Antworten hier wie im anderem Forum

            Kommentar

            • daggel
              Newbie
              • 20.03.2023
              • 5

              #7
              Hallo,

              habe eine Nacht darüber geschlafen und dann doch noch eine Lösung gefunden.

              In HTML habe ich diese Anweisung stehen:

              HTML-Code:
              &lt;hr style="background-image:url(TrennungTranparentQuer.png)"&gt;
              Das Bild muss bei mir aber direkt in dem Ordner liegen, in dem auch die HTML-Datei liegt. Meinen Pfad zum Ordner mit den Bildern funktioniert nicht. ?????

              In der Css-Datei steht dann folgendes:

              hr{
              {
              /*background: url("..\Bilder\TrennungTranparentQuer.png");*/

              background-repeat: repeat-x;
              background-size: 50px30px;
              /*background-size: contain;*/
              /*position: absolute;*/
              width: 100%;
              height: 60px;
              margin-top: -15px;
              border: none;
              }}
              }

              Hab die "Kommentare" jezt nicht raus genommen.

              Aber wie man sieht, es funktioniert:

              grafik.png

              Aber warum, funktioniert das bei mir nur auf diese Weise, ährend auf anderen Seiten was ganz anderes zu finden ist? Ich nutze Visual Studio Code und habe keine "Plugin" für HTML und Css istalliert.

              Und ja, ich stelle das nur hier rein, damit man mir nicht weiter böse ist.


              Liebe Grüße

              daggel



















              }

              Kommentar

              • Sempervivum
                Kaiser
                • 09.07.2009
                • 1434

                #8
                Aber warum, funktioniert das bei mir nur auf diese Weise, ährend auf anderen Seiten was ganz anderes zu finden ist?
                Das liegt daran, dass Du einige Syntaxfehler in deinem CSS hast. Ich nutze ebenfalls VS-Code und der zeigt den Code so an:
                hr-bg-image.png

                Dieses funktioniert jedoch einwandfrei:
                Code:
                    <style>
                        hr {
                            background: url("images/busleft.png");
                            background-repeat: repeat-x;
                            background-size: 50px 30px;
                            /*background-size: contain;*/
                            /*position: absolute;*/
                            width: 100%;
                            height: 60px;
                            margin-top: -15px;
                            border: none;
                        }
                    </style>
                ​</head>
                <body>
                    <hr>
                ​
                (Pfad des Bildes habe ich auf meine Gegebenheiten umgeändert.)

                Wenn VS-Code ohne Erweiterungen diese Fehler nicht markiert, empfehle ich, geeignete zu installieren. Dann bleibt dir viel mühsame Fehlersuche erspart.

                Edit: Noch etwas, dieses:
                Code:
                style="background-image:url(TrennungTranparentQuer.png)"
                weist darauf hin, dass dein Bild im selben Verzeichnis wie die HTML-Datei liegt. Dann liegen u. U. Probleme mit den Pfaden vor. Informiere dich hier über das richtige Referenzieren:

                Hast Du dein CSS in eine Datei ausgelagert, ist der Pfad dieser Datei die Basis für das Adressieren von Bildern.
                Zuletzt geändert von Sempervivum; 23.03.2023, 14:39.
                Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
                (Andre Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)

                Kommentar

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

                Einklappen

                Themen: 57.385   Beiträge: 432.930   Mitglieder: 29.740   Aktive Mitglieder: 33
                Willkommen an unser neuestes Mitglied, hacker2024.

                Online-Benutzer

                Einklappen

                986 Benutzer sind jetzt online. Registrierte Benutzer: 0, Gäste: 986.

                Mit 9.939 Benutzern waren am 17.05.2023 um 21:38 die meisten Benutzer gleichzeitig online.

                Die neuesten Themen

                Einklappen

                • ST747
                  Signatur
                  Hallo,
                  da habe ich ein PDF-Dokument an einer Behörde geschickt und die schreibt zurück, entweder mit der Post oder ausdrucken, unterschreiben und wieder scannen, dann verschicken.
                  aber das drucken und den umstand will ich mir sparen.
                  bei adobe gibt es wohl eine funktion die ich mir...
                  Gestern, 16:41
                • arnego2
                  Openvpn und cloud
                  Wer wie ich über OpenVPN ins Homepage-Forum gehen will, läuft Gefahr, nicht reingelassen zu werden.
                  Ich nehme an, die Cloud Manager sind davon überzeugt, dass wer einen VPN Service nutzt, etwas zu verbergen hat.

                  Leute, die wie ich in einem sanktionierten Land leben, müssen mit...
                  Gestern, 14:05
                • Orhun
                  ORHUX.pictures - Free Image / Picture Hosting
                  Liebe Mitglieder der Community,

                  ich bin begeistert, euch mein neuestes Projekt "ORHUX.pictures" präsentieren zu können. Bei ORHUX.pictures habt ihr die Möglichkeit, eure Bilder und Fotos hochzuladen, von anderen Nutzern bewerten zu lassen und sie mit der ganzen Welt zu teilen....
                  Gestern, 01:11
                • Lupus_III
                  Image vor Übeschrift setzen.
                  Hallo zusammen,

                  ich würde gerne vor h2-Überschriften in einer HTML-Seite ein kleines selbst erzeugtes Image setzen, so wie man das mit Fontawesome Icons machen kann. Das Image soll die gleiche Größe wie die H2-Überschrift haben. Hat jemand eine Idee, wie ich vorgehen kann?
                  17.03.2024, 12:03
                • bodan
                  Warum KI viel Wasser und Strom braucht - zur Umweltbilanz der KI
                  Warum KI viel Wasser und Strom braucht - zur Umweltbilanz der KI

                  Warum KI viel Wasser und Strom braucht

                  interessante Einsichten über KI https://www.tagesschau.de/thema/k%C3...he_intelligenz

                  Stand: 15.03.2024 08:47 Uhr÷

                  Zit: Bei einem Gespräch...
                  15.03.2024, 17:48

                Die neuesten Beiträge

                Einklappen

                • ST747
                  Signatur
                  Hallo,
                  da habe ich ein PDF-Dokument an einer Behörde geschickt und die schreibt zurück, entweder mit der Post oder ausdrucken, unterschreiben und wieder scannen, dann verschicken.
                  aber das drucken und den umstand will ich mir sparen.
                  bei adobe gibt es wohl eine funktion die ich mir...
                  Gestern, 16:41
                • bdt600
                  Antwort auf Signatur
                  Scanne eine Unterschrift ein und füge die gescannte Datei in das PDF ein. Die Unterschrift mit der Maus herzustellen ist zu hakelig, wenn man nicht gerade ein Tablett mit Stift hat.
                  Gestern, 21:26
                • ST747
                  Antwort auf Signatur
                  hallo,
                  ich habe pdf24.org gerade probiert.
                  das funktioniert gut.
                  ich habe da mit der maus meine unterschrift gemacht.
                  die ist noch ziemlich eckig, aber es geht.
                  war ein guter tip.
                  gerhard...
                  Gestern, 21:22
                • bdt600
                  Antwort auf Signatur
                  Siehe https://www.pdf24.org/de/
                  Gestern, 18:04
                • Merloto
                  Antwort auf Meine Homepage
                  ich wohne alleine, da störts niemanden, außer evtl die Nachbarn
                  Gestern, 16:46
                • Merloto
                  Antwort auf Signatur
                  Hallo gerhard, meinst so ein Programm, bei dem man die PDFs direkt selbst bearbeiten kann, oder? - nach so etwas suche ich ebenfalls - wenn möglich ein kostenloses Programm. Kann da jemand etwas empfehlen?
                  Gestern, 16:45
                • Orhun
                  ORHUX.pictures - Free Image / Picture Hosting
                  Liebe Mitglieder der Community,

                  ich bin begeistert, euch mein neuestes Projekt "ORHUX.pictures" präsentieren zu können. Bei ORHUX.pictures habt ihr die Möglichkeit, eure Bilder und Fotos hochzuladen, von anderen Nutzern bewerten zu lassen und sie mit der ganzen Welt zu teilen....
                  Gestern, 01:11
                • arnego2
                  Antwort auf ORHUX.pictures - Free Image / Picture Hosting
                  Wie schützt ihr euch vor den Schelmen, die andere Leute Bilder hochladen?
                  Gestern, 14:06
                • arnego2
                  Openvpn und cloud
                  Wer wie ich über OpenVPN ins Homepage-Forum gehen will, läuft Gefahr, nicht reingelassen zu werden.
                  Ich nehme an, die Cloud Manager sind davon überzeugt, dass wer einen VPN Service nutzt, etwas zu verbergen hat.

                  Leute, die wie ich in einem sanktionierten Land leben, müssen mit...
                  Gestern, 14:05
                • bdt600
                  Antwort auf Welches CMS für gute Menüs?
                  Dateien wie footer.php solltest du sowieso nicht ändern, da sie bei nächsten Update des Themes wieder überschrieben werden. Wenn du an solchen Dateien etwas ändern willst/musst, dann lege ein Child-Theme an.


                  Keine Ahnung, allerdings kann man mit den Infos nur sehr wenig anfangen....
                  Gestern, 07:00
                Lädt...
                X