Background linear gradiant

  • Hi,


    Ich mal wieder :)


    Ich habe folgendes Problem.

    Ich in meiner CSS folgenden Farbeverlauf eingestellt.

    background: linear-gradient(180deg, rgba(42,34,34,1) 0%, rgba(65,7,91,1) 53%, rgba(120,06,99,47) 100%);


    Das funktioniert ganz gut. Aber sobald ich den Browser kleiner mache und man anfangen muss zu scrollen, fängt der Farbverlauf wieder von vorne an, statt durchgängig zu bleiben.

  • Ich glaube du brauchst sowas

    Code
    1. background-repeat:no-repeat;

    Falls nicht , bitte eine genauere Erklärung für mich .

    Nein, das geht leider auch nicht. Dann fängt er nicht von vorne an, sondern es bleibt einfach weiß.

  • Nein, das geht leider auch nicht. Dann fängt er nicht von vorne an, sondern es bleibt einfach weiß.

    Ich hatte das wohl falsch verstanden.

    Wie schon gesagt wurde, poste mal dein Code oder mach ein Beispiel bei codepen fertig, wo man das Problem erkennen kann.

    Oder Link zur Seite, wenn du hast

  • Ja ich weiß. Ist noch super Chaotisch. Bin noch viel am experimentieren.

  • Möchtest du noch paar Hinweise zu dein HTML / CSS haben?

    In der CSS steht das, überlege dir mal was daran falsch/ unnutz ist

    Im HTML

    type="text/css" Kannst du löschen , ist veraltet

    style="  color: #f70cca;" Auf Inline Styles sollte man verzichten, dafür gibt es die CSS


    Mehr konnte ich jetzt nicht finden.

  • Da musste ich Stackoverflow um Rat fragen und habe dort die Lösung gefunden: Man muss für html min-height auf 100% setzen statt height:

    Code
    1. html {
    2. /* height: 100%; */
    3. min-height: 100%;
    4. color: white;
    5. font-family: 'Quicksand';
    6. font-family: url("fonts/Quicksand.ttf");
    7. src: url("fonts/Quicksand.ttf");
    8. font-family: 'Quicksand',
    9. }

    https://stackoverflow.com/ques…retch-but-instead-repeats

    (die Lösung von Ricardo Zea)

    Danke. Hat geklappt. Davon habe ich noch nie gehört.

  • Klar immer gerne. Ja die Klassen von der CSS habe ich mal gebraucht und bin mir noch nicht ganz sicher ob das bleiben soll.

    Wie gesagt ich experementiere noch viel.

    Wo ich mir noch nicht ganz sicher bin ist Bootstrap. Das nutze ich erst seit ein paar tagen. Mir gefällt es zum Beispiel nicht das ich den unteren Teil noch über URL ziehe. Die kann man doch sicher auch herunterladen und lokal laden oder? Und wäre es auch nicht schicker alle meine Skripte in eine externe Datei zu packen?

  • Zitat

    Davon habe ich noch nie gehört.

    Ich auch nicht und zunächst war es auch nicht plausibel für mich: Wenn man den Farbverlauf auf body anwendet sollte man erwarten, dass die 100% sich auch auf body beziehen. Es ist jedoch so, dass sich eine Breiten- oder Höhenangabe fast immer auf das Elternelement bezieht und das ist in diesem Fall html. Und der Farbverlauf läuft ja auch unter background-image, wird also wie ein Bild behandelt. Damit ist es dann doch wieder plausibel.

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von Sempervivum ()

  • Ich auch nicht und zunächst war es auch nicht plausibel für mich: Wenn man den Farbverlauf auf body anwendet sollte man erwarten, dass die 100% sich auch auf body beziehen. Es ist jedoch so, dass sich eine Breiten- oder Höhenangabe fast immer auf das Elternelement bezieht und das ist in diesem Fall html. Und der Farbverlauf läuft ja auch unter background-image, wird also wie ein Bild behandelt. Damit ist es dann doch wieder plausibel.

    Da ihr gefragt ob ich noch hilfe brauche. Die brauche ich tatsächlich.

    Am rechten Rand soll ja immer in japanischen Schriftzeichen vertikal Arcade angeheftet werden.

    1. <div class="sideTitle">
    2. アーケード
    3. </div>



    Da klappt bei mir auch ganz gut. Nur bei kleineren Monitoren kann es passieren das andere Elemente unter mein "sideTitle" rutschen. Ich hätte aber gerne das der immer rechts bleibt, komme was wolle. Das gleiche ist mit der oberen Nav Zeile.

    Ich weiß das ich da mit Grids und Container arbeiten müsste. Aber ich kriege das mit dem side Title irgendwie nicht gebacken.

  • Also das Layout kann ruhig fest sein, OK. Soll diese Seite denn überhaupt scrollbar sein? Im Moment ist ja nur wenig Content drin.

    Also mein Grundidee war schon das jede Seite so aufgeräumt ist, das man nicht scrollen muss. Weiß nur nicht ob das bei allen Monitoren möglich ist. Ich habe noch eine Seite mit Highscore die von den Spielen über einen mySQL Connector übertragen werden. Und da wird es eng. (Ist aber auf 10 Einträge beschränkt)

  • Solange man sich auf Monitore beschränkt, ist das sicher machbar. Wenn man Handys einbezieht, wird es allerdings schwierig.

    Ne. Für Smartphones muss es nicht sein. Da die Spiele auch schon nicht für Smartphones ausgelegt sind.