Hintergrund nach "unten" wiederholen?

  • geschlossen

  • KingstonTown
  • 6135 Aufrufe 4 Antworten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Hintergrund nach "unten" wiederholen?

    Folgendes,

    ich habe eine Hintergrundgrafik eingebaut, welche sich nach "unten" wiederholen soll, dies passiert auch, aber nur in Größe des Menüs z.B., nicht drüber hinweg.

    Die Grafik habe ich wie folgt eingebaut:

    Quellcode

    1. <div style="background-image:url(images/bg.png); background-repeat:repeat-y; margin:0px; padding:0px">


    Was genau muss ich da ändern, damit das Bild sich nach "unten" wiederholt UND über die ganze Seite läuft?

    Vielen Dank für Eure Hilfe.

    P.S. wenn ich "-y" weglassen, und nur "repeat" schreibe, wiederholt es sich wieder nur seitlich :(

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von KingstonTown ()

  • Der Hintergrund geht nur soweit, wie irgendetwas steht.

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <title></title>
    4. <script src="menuscript.js" language="javascript" type="text/javascript"></script>
    5. <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen, print" />
    6. </head>
    7. <body>
    8. <div style="background-image:url(images/bg.png); background-repeat:repeat-y; margin:0px; padding:0px">
    9. <table border="0" cellpadding="0" cellspacing="0"><tr><td>
    10. <a href="xxxxxxxxxxxx.htm" onmouseover="setOverImg('1','');" onmouseout="setOutImg('1','');" target="haupt"><img src="buttons/button1up.png" border="0" id="button1" vspace="1" hspace="1"></a><p>
    11. <a href="xxxxxxxxxxxx.htm" onmouseover="setOverImg('2','');" onmouseout="setOutImg('2','');" target="haupt"><img src="buttons/button2up.png" border="0" id="button2" vspace="1" hspace="1"></a><br>
    12. <a href="xxxxxxxxxxxx.htm" onmouseover="setOverImg('3','');" onmouseout="setOutImg('3','');" target="haupt"><img src="buttons/button3up.png" border="0" id="button3" vspace="1" hspace="1"></a><br>
    13. <a href="xxxxxxxxxxxx.htm" onmouseover="setOverImg('4','');" onmouseout="setOutImg('4','');" target="haupt"><img src="buttons/button4up.png" border="0" id="button4" vspace="1" hspace="1"></a><br>
    14. <a href="xxxxxxxxxxxx.htm" onmouseover="setOverImg('5','');" onmouseout="setOutImg('5','');" target="haupt"><img src="buttons/button5up.png" border="0" id="button5" vspace="1" hspace="1"></a><br>
    15. <a href="xxxxxxxxxxxx.htm" onmouseover="setOverImg('6','');" onmouseout="setOutImg('6','');" target="haupt"><img src="buttons/button6up.png" border="0" id="button6" vspace="1" hspace="1"></a><br>
    16. <a href="xxxxxxxxxxxx.htm" onmouseover="setOverImg('7','');" onmouseout="setOutImg('7','');" target="haupt"><img src="buttons/button7up.png" border="0" id="button7" vspace="1" hspace="1"></a><br>
    17. <a href="xxxxxxxxxxxx.htm" onmouseover="setOverImg('8','');" onmouseout="setOutImg('8','');" target="haupt"><img src="buttons/button8up.png" border="0" id="button8" vspace="1" hspace="1"></a><br>
    18. <a href="xxxxxxxxxxxx.htm" onmouseover="setOverImg('9','');" onmouseout="setOutImg('9','');" target="haupt"><img src="buttons/button9up.png" border="0" id="button9" vspace="1" hspace="1"></a><br>
    19. <a href="xxxxxxxxxxxx.htm" onmouseover="setOverImg('10','');" onmouseout="setOutImg('10','');" target="haupt"><img src="buttons/button10up.png" border="0" id="button10" vspace="1" hspace="1"></a><br>
    20. <a href="xxxxxxxxxxxx.htm" onmouseover="setOverImg('11','');" onmouseout="setOutImg('11','');" target="haupt"><img src="buttons/button11up.png" border="0" id="button11" vspace="1" hspace="1"></a>
    21. </td></tr></table>
    22. <p>
    23. <p>
    24. <div id="Links">
    25. © My_Name.de 2012 <br>
    26. <a href="xxxxxxxxxxxx.htm" target="haupt"><font color="#000000">HIER HER</font></a></div>
    27. </div>
    28. </body>
    29. </html>
    Alles anzeigen


    So sieht der Code aus, und der Hintergrund läuft bis unten "HIER HER".

    Würde ich aber jetzt sowas schreiben wie

    body background="bild.png"

    Geht das Bild bis komplett unten, so wie ich es haben will, aber dann wiederholt es sich quasi nach unten UND nach rechts.

    Hoff ihr wisst, wie ich das meine?!
  • Moin,
    also dein Problem ist, dass das DIV nicht "lang genug" ist.
    Lösung ist, entweder body oder html zu nehmen (Probiere es hier nicht mit der IE-Schreibweise - auch für den body-Tag kannst du CSS schreiben) + CSS-Eigenschaften "background-repeat:repeat-y"

    Oder du bestimmst, dass das DIV mindestens so lang ist, wie der body-Tag. Hier brauchst du die CSS-Eigenschaft "min-height:100%" - wobei du dich so auf die "Eltern-Element-Höhe" beziehst. Sprich, setze hml und body am Besten auch auf 100%.

    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.
  • Vielen Dank.

    Habe es nun wie folgt gelöst:

    div.bg {
    background-image: url(images/bg.png);
    background-repeat:repeat-y;
    width:100%;height:100%;
    border:0px solid red;
    padding:0px;
    }











    EDIT:

    Habe da nun doch noch eine Frage. Habe diesen Hintergrund im linken Menü, dieser geht von dunkel auf weiß, so, dass es in einem über geht mit dem mittigen Teil.

    Dies wollte ich nich auch auf der rechten Seite machen, was auch geklappt hat, allerdings wird der Hintergrund weiter zur Mitte geschoben, sobald ein Scrollbalken auftaucht :(

    Kann man den Hintergrund z.B. fixieren, damit sich dieser nicht in Richtung Mitte verschiebt?

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von KingstonTown ()