Fabian: Hintergrund-Bild nicht mitscrollen

SELF-Forum

Hintergrund-Bild nicht mitscrollen

Fabian
– Informationen zu den Bewertungsregeln

Ich habe diese Nachricht schonmal verfasst, aber anscheinend wurde sie nicht gepostet... .

Hallo!
Ich hab es jetzt hinbekommen, dass ich mithilfe des img-Elements ein Hintergrundbild einbinde, das unabhängig von der Bildschirmauflösung immer die gesamte Größe der Anzeigefläche ausnutzt (<img width=100% height=100%...>).

Nun möchte ich aber folgendes Verhalten haben:
Per CSS positioniere ich die Texte so, dass sie auf das Hintergrundbild geschrieben werden.
Nun sind diese Texte aber manchmal länger als eine Bildschirmhöhe.
Das Resultat: Man muss scrollen.
Dabei kommt es zu dem Effekt, dass das Hintergrund-Bild immer weiter nach oben rutscht, bis man es nicht mehr sieht.
Nun wäre es aber schön, wenn das Hintergrund-Bild einfach stehen bleiben würde und es so aussieht, als ob nur der Text gescrollt werden würde. Wie mache ich das?

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Hintergrund-Bild nicht mitscrollen

    Stefano Albrecht Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Fabian ;~)

    Das kannst Du mit CSS bewerkstelligen.

    Suche auf selfhtml nach "background" in der CSS-Kategorie.

    Freundliche Grüße
    Stefano Albrecht

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Hintergrund-Bild nicht mitscrollen

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Das kannst Du mit CSS bewerkstelligen.

      Nein, Stefano, kann er (noch) nicht.

      Siehe die unzähligen Threads zur Nachfrage, wie man Hintergrundbilder mit CSS skalieren kann.

      Live long and prosper,
      Gunnar

      --
      „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Hintergrund-Bild nicht mitscrollen

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Ich hab es jetzt hinbekommen, dass ich mithilfe des img-Elements ein Hintergrundbild einbinde, das unabhängig von der Bildschirmauflösung immer die gesamte Größe der Anzeigefläche ausnutzt […]

    Fabian,
    Bildschirmauflösung und Größe der Anzeigefläche sind zwei völlig unterschiedliche Dinge. Das erste von beiden ist für dich völlig irrelevant.

    (<img width=100% height=100%...>).

    Das ist kein gültiges HTML. Siehe [HTML401@de §3.2.2], beachte die Anmerkung der Übersetzer.

    Du kannst die Attribute ganz weglassen und die Angaben auch mit CSS machen.

    Nun wäre es aber schön, wenn das Hintergrund-Bild einfach stehen bleiben würde und es so aussieht, als ob nur der Text gescrollt werden würde. Wie mache ich das?

    Mit http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index@title=z-index.

    Du musst das Bild dazu außerhalb des Textes haben:

    <body>  
  <img id="background" src="foo" alt="" />  
  <div id="content">  
    <h1>Lorem ipsum</h1>  
    <p>Lorem ipsum dolor sit amet</p>  
    <p>Duis autem vel eum iriure</p>  
  </div>  
</body>

    Das Bild wird gestreckt und im Hintergrund fixiert:

    #background {  
  width: 100%;  
  height: 100%;  
  position: fixed;  
  left: 0;  
  top: 0;  
  z-index: 0;  
}

    Dem #content gibst du einen höheren z-index, damit dieser aber wirkt, muss dessen http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=position-Eigenschaft einen vom Default 'static' der abweichenden Wert haben:

    #content {  
  position: relative;  
  z-index: 1;  
}

    Live long and prosper,
    Gunnar

    --
    „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Hintergrund-Bild nicht mitscrollen

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Es geht (zumindest in diesem einfachen Fall) auch ohne gruppierendes div:

      <body>  
  <img id="background" src="foo" alt="" />  
  <h1>Lorem ipsum</h1>  
  <p>Lorem ipsum dolor sit amet</p>  
  <p>Duis autem vel eum iriure</p>  
</body>

      * {  
  position: relative;  
  z-index: 1;  
}

      (#background wie gehabt. #background hat höhere Spezifität als *)

      Live long and prosper,
      Gunnar

      PS. Und dass der IE position: static nicht umsetzt …

      --
      „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Hintergrund-Bild nicht mitscrollen

        Fabian
        – Informationen zu den Bewertungsregeln

        PS. Und dass der IE position: static nicht u

        msetzt …

        Ähm- wenn du damit meinst, dass es beim IE nicht funktioniert- da hast du recht.
        Kann ich die Lösung nicht so umschreiben, dass sie auch in diesem richtig arbeitet?

        Bis jetzt benutze ich folgenden Code- der funktioniert auch im IE, ist aber wahrscheinlich nicht valide:

        [html]
        <html>
        <body>
        <img src=bg.jpg width=100% height=100% style="position:fixed" />
        <p style="position:absolute; left:200px; top:100px;">
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        Dies ist ein Text<br />
        </p>
        </body>
        </html>
        [/html]

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Hintergrund-Bild nicht mitscrollen

          Gunnar Bittersmann Homepage des Autors
          – Informationen zu den Bewertungsregeln

          PS. Und dass der IE position: static nicht umsetzt …

          Ähm, position: fixed war natürlich gemeint.

          Kann ich die Lösung nicht so umschreiben, dass sie auch in diesem richtig arbeitet?

          Sie arbeitet im Rahmen seiner bescheidenen Möglichkeiten. Ein Mofa fährt auch keine 100 km/h.

          Bis jetzt benutze ich folgenden Code- der funktioniert auch im IE, ist aber wahrscheinlich nicht valide:

          Nein, ist er nicht. Da hast es schon geschafft, dem Link in meiner Antwort zu folgen?!

          Des weiteren solltest du nicht style-Attribute verwenden, sondern die Angaben gesammelt im style-Element im head oder in einer externen Datei tätigen.

          Live long and prosper,
          Gunnar

          --
          „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  3. Hintergrund-Bild nicht mitscrollen

    mhumh
    −1 Informationen zu den Bewertungsregeln

    <script language="JavaScript" type="text/javascript">
    <!--
    var timerID = null;
    var timerRunning = false;
    var id,pause=0,position=0;

    function moe() {
    var i,k,msg="text";
    k=(75/msg.length)+1;for(i=0;i<=k;i++) msg+=" "+msg;document.mhh.moe.value=msg.substring(position,position+75);
    if(position++==38) position=0;
    id=setTimeout("moe()",1000/10); }

    function action() {
    if(!pause) {
    clearTimeout(id);
    pause=1; }
    else {moe();
    pause=0; } }
    // -->
    </script>

    <form name="mhh">
    <input type="text" name="moe" size="75">
    </form>

    <body onLoad="moe()">

    Beitrag melden
    −1
    Informationen zu den Bewertungsregeln

    1. Hintergrund-Bild nicht mitscrollen

      mhmh
      – Informationen zu den Bewertungsregeln

      omg, falsches topic Oo"

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Hintergrund-Bild nicht mitscrollen

        Fabian
        – Informationen zu den Bewertungsregeln

        Ach so - ok^^

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

    2. Hintergrund-Bild nicht mitscrollen

      Fabian
      – Informationen zu den Bewertungsregeln

      Vielen Dank, aber JS möchte ich nach Möglichkeit vermeiden.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln