Milan: Wechselndes Hintergrundbild in HTML?

0 16

Wechselndes Hintergrundbild in HTML?

Milan
  • css
  • html
  • javascript
  1. 0
    Linuchs
  2. 0
    JürgenB
    1. 0
      Auge
      1. 0
        Gunnar Bittersmann
    2. 0
      Gunnar Bittersmann
  3. 0
    Gunnar Bittersmann
    1. 0
      Matthias Apsel
      1. 0
        Gunnar Bittersmann
        1. 0
          Matthias Apsel
          1. 0
            Gunnar Bittersmann
            1. 0
              Matthias Apsel
            2. 0
              JürgenB
              • menschelei
              1. 0
                Gunnar Bittersmann
    2. 0
      JürgenB
      1. 0
        Gunnar Bittersmann
SELF-Forum

Wechselndes Hintergrundbild in HTML?

Milan
– Informationen zu den Bewertungsregeln

Hallo, wie kann ich einen script in Html erstellen, sodass sich das Hintergrundbild ca alle 10 sekunden verändert. Ich habe das Hintergrundbild bisher im CSS definiert:

html{ background: url(images/DSC_0601-01.JPG) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

Wäre nett wenn mir jemand helfen kann. Meine Javascript Kenntnisse sind leider nicht so gut.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Wechselndes Hintergrundbild in HTML?

    Linuchs (Versionen)
    – Informationen zu den Bewertungsregeln

    wie kann ich einen script in Html erstellen, sodass sich das Hintergrundbild ca alle 10 sekunden verändert.

    HTML kann eine geladene Seite nicht ändern. Mit zwei Ausnahmen:

    HTML kann nach 10 Sekunden eine andere Seite laden und die dann wieder eine andere ...

    <head>
<meta http-equiv="refresh" content="10; url=http://example.com/seite2.html">

    HTML kann animierte Grafiken "abspielen". Du könntest so eine Grafik erstellen und als Hintergrund angeben.

    Ich habe das Hintergrundbild bisher im CSS definiert:

    Und ich habe beim Tippen der Antwort einen Schluck Sprudel getrunken. Hat beides nur bedingt mit HTML zu tun ;-)

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Wechselndes Hintergrundbild in HTML?

    JürgenB Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo,

    wie kann ich einen script in Html erstellen, sodass sich das Hintergrundbild ca alle 10 sekunden verändert. Ich habe das Hintergrundbild bisher im CSS definiert:

    Zugriff auf das CSS per Javascript ist hier beschrieben:

    JavaScript und CSS

    Die Dynamik bekommst du mit setInterval hin.

    … DSC_0601-01.JPG …

    ich hoffe, du verwendest nicht das Originalbild aus der Kamera.

    Gruß
    Jürgen

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Wechselndes Hintergrundbild in HTML?

      Auge
      – Informationen zu den Bewertungsregeln

      Hallo

      … DSC_0601-01.JPG …

      ich hoffe, du verwendest nicht das Originalbild aus der Kamera.

      Warum nicht? Die Kamera mit dem Sendboten zum Rechenzentrum geschafft, dort direkt an den Webserver gehängt und schon gibt's die schönsten, detailreichsten Hintergrundbilder, die man sich wünschen kann. :-)

      @Milan: Mal im ernst, bei Bildern, die ja genre mal mit großen Datenmengen daher kommen, sollte man sich bewusst sein, dass man einen Kompromiss zwischen Bildqualität und Datenmenge suchen und finden muss. Einerseits möchte man nicht, dass die Details eines Bildes verschwinden (Bildqualität und auch -ausschnitt), andererseits gilt es zu beachten, dass Besucher Tarife mit beschränktem Datenvolumen, dass sie bestimmt nicht nur bei dir verbrauchen wollen, benutzen und dass die Ladegeschwindigkeit, je nach verwendeter Zugangstechnik, unterschiedlichen Beschränkungen unterliegt.

      Tschö, Auge

      --
      Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
      Toller Dampf voraus von Terry Pratchett
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Wechselndes Hintergrundbild in HTML?

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Auge

        @Milan: Mal im ernst, bei Bildern, die ja genre mal mit großen Datenmengen daher kommen, sollte man sich bewusst sein, dass man einen Kompromiss zwischen Bildqualität und Datenmenge suchen und finden muss. Einerseits möchte man nicht, dass die Details eines Bildes verschwinden (Bildqualität und auch -ausschnitt), andererseits gilt es zu beachten, dass Besucher Tarife mit beschränktem Datenvolumen, dass sie bestimmt nicht nur bei dir verbrauchen wollen, benutzen und dass die Ladegeschwindigkeit, je nach verwendeter Zugangstechnik, unterschiedlichen Beschränkungen unterliegt.

        Bei Bildwechslern mit img-Elementen kann man auch per srcset-Attribut für jedes Bild je nach Viewport jeweils andere Bilddateien verwenden. Bei Bedarf auch picture-Elemente verwenden.

        Bei Bildwechslern mit Hintergrundbildern kann man per media queries für jedes Bild je nach Viewport jeweils andere Bilddateien verwenden.

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

    2. Wechselndes Hintergrundbild in HTML?

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@JürgenB

      … DSC_0601-01.JPG …

      ich hoffe, du verwendest nicht das Originalbild aus der Kamera.

      „Funzt doch prima bei mir.“ *duckundweg*

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  3. Wechselndes Hintergrundbild in HTML?

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Milan

    wie kann ich einen script in Html erstellen, sodass sich das Hintergrundbild ca alle 10 sekunden verändert.

    Was heißt „sich verändert“? Gegen ein anderes ausgetauscht? Wieviele verschiedene Bilder? (*) Zwei drei? Noch mehr?

    Ich habe das Hintergrundbild bisher im CSS definiert:

    html{
	background: url(images/DSC_0601-01.JPG) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

    Die Zeilen mit den Präfixen entsorgs du bitte rückstandslos wegen noch nie oder schon lang nicht mehr erforderlich.

    Wäre nett wenn mir jemand helfen kann. Meine Javascript Kenntnisse sind leider nicht so gut.

    Solche sind vielleicht gar nicht erforderlich; aber CSS-Kentnisse.[1] Das sei auch allen Antwortenden gesagt, die mit JavaScript auf alles ballern und dabei unschuldige Kätzchen treffen.

    Wenn die Antwort auf die oben gestellte Frage (*) „zwei“ ist, kann man diesen Bildwechler so anpassen, dass er statt mit img-Elementen mit ::before- und ::after-Pseudoelementen arbeitet. Sieht dann so aus.

    Wenn die Antwort „drei“ ist, kann man ein Hintergrundbild fürs html-Element einbeziehen.

    Bei „noch mehr“ (möglicherweise auch bei zweien oder dreien) könnte man einen Bildwechsler wie den obigen ins Markup einbinden und in den Hintergrund legen (position: fixed; z-index: -1). Sind die Bilder denn schmückendes Beiwerk oder doch Inhalt?

    Ist der Bildwechsel wirklich eine gute Idee oder lenkt das die Nutzer vom Inhalt ab?

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory

    1. und Orthographie-Kenntnisse ↩︎

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Wechselndes Hintergrundbild in HTML?

      Matthias Apsel Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hallo Gunnar Bittersmann,

      html{
	background: url(images/DSC_0601-01.JPG) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

      Die Zeilen mit den Präfixen entsorgs du bitte rückstandslos wegen noch nie oder schon lang nicht mehr erforderlich.

      Und die zweite auch.

      html {
    background: url(images/DSC_0601-01.JPG) center cover no-repeat fixed;
}

      Wenn die Antwort „drei“ ist, kann man ein Hintergrundbild fürs html-Element einbeziehen.

      Bei „noch mehr“ (möglicherweise auch bei zweien oder dreien) könnte man einen Bildwechsler wie den obigen ins Markup einbinden und in den Hintergrund legen (position: fixed; z-index: -1). Sind die Bilder denn schmückendes Beiwerk oder doch Inhalt?

      Lässt sich auch noch das body-Element auf diese Weise mit einbeziehen?

      Bis demnächst
      Matthias

      --
      Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Wechselndes Hintergrundbild in HTML?

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Matthias Apsel

        Lässt sich auch noch das body-Element auf diese Weise mit einbeziehen?

        Hm, möglicherweise. Man kann sich darauf verlassen, dass die Animationen für alle (Pseudo-)Elemente synchronisiert starten?

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Wechselndes Hintergrundbild in HTML?

          Matthias Apsel Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Hallo Gunnar Bittersmann,

          Lässt sich auch noch das body-Element auf diese Weise mit einbeziehen?

          Hm, möglicherweise. Man kann sich darauf verlassen, dass die Animationen für alle (Pseudo-)Elemente synchronisiert starten?

          keine Ahnung. Wenn du das nicht weißt, …

          Bis demnächst
          Matthias

          --
          Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Wechselndes Hintergrundbild in HTML?

            Gunnar Bittersmann Homepage des Autors
            – Informationen zu den Bewertungsregeln

            @@Matthias Apsel

            Lässt sich auch noch das body-Element auf diese Weise mit einbeziehen?

            Hm, möglicherweise. Man kann sich darauf verlassen, dass die Animationen für alle (Pseudo-)Elemente synchronisiert starten?

            keine Ahnung. Wenn du das nicht weißt, …

            Man verlässt sich ja schon bei zwei Bildern mit html::before und html::after darauf.

            Ich würde aber nicht die doch zusammengehörenden Bilder auf mehrere Elemente verteilen wollen. Wenn es denn ein wechselndes Hintergrundbild sein soll, würde ich eine saubere JavaScript-Lösung einer dreckigen CSS-Lösung vorziehen.

            LLAP 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Wechselndes Hintergrundbild in HTML?

              Matthias Apsel Homepage des Autors
              – Informationen zu den Bewertungsregeln

              Hallo Gunnar Bittersmann,

              Ich würde aber nicht die doch zusammengehörenden Bilder auf mehrere Elemente verteilen wollen. Wenn es denn ein wechselndes Hintergrundbild sein soll, würde ich eine saubere JavaScript-Lösung einer dreckigen CSS-Lösung vorziehen.

              Nun ja, aber html und body spielen gerade beim Hintergrundbild eine Sonderrolle.

              Bis demnächst
              Matthias

              --
              Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

            2. Wechselndes Hintergrundbild in HTML?

              JürgenB Homepage des Autors
              – Informationen zu den Bewertungsregeln

              Hallo Gunnar,

              … würde ich eine saubere JavaScript-Lösung einer dreckigen CSS-Lösung vorziehen.

              und die Katzen? :)

              Gruß
              Jürgen

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Wechselndes Hintergrundbild in HTML?

                Gunnar Bittersmann Homepage des Autors
                – Informationen zu den Bewertungsregeln

                @@JürgenB

                … würde ich eine saubere JavaScript-Lösung einer dreckigen CSS-Lösung vorziehen.

                und die Katzen? :)

                Die erfreuen sich bester Gesundheit.

                LLAP 🖖

                --
                “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

    2. Wechselndes Hintergrundbild in HTML?

      JürgenB Homepage des Autors (Versionen)
      – Informationen zu den Bewertungsregeln

      Hallo Gunnar,

      bei

      … ca alle 10 sekunden …

      bin ich von „beliebig vielen“ Bildern ausgegangen.

      Bei „noch mehr“ (möglicherweise auch bei zweien oder dreien) könnte man einen Bildwechsler wie den obigen ins Markup einbinden und in den Hintergrund legen (position: fixed; z-index: -1). Sind die Bilder denn schmückendes Beiwerk oder doch Inhalt?

      wie würde denn ein Hintergrundbild-Wechsler dann „Katzenschonend“ aussehen? (Idee reicht.)

      Gruß
      Jürgen

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Wechselndes Hintergrundbild in HTML?

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@JürgenB

        bin ich von „beliebig vielen“ Bildern ausgegangen.

        wie würde denn ein Hintergrundbild-Wechsler dann „Katzenschonend“ aussehen? (Idee reicht.)

        Bei beliebig vielen Bildern greift die Wenn-Bedingung (wenn es mit CSS geht) nicht, dafür aber jene.

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln