Ankündigung

Einklappen
Keine Ankündigung bisher.

CSS : Ganzseitiges Hintergrundbild ohne Scrollbalken

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • CSS : Ganzseitiges Hintergrundbild ohne Scrollbalken

    Hallo :-)

    Ich würde gerne eine Webseite erstellen mit einem ganzseitigen Hintergrundbild. Oben links sollen ein Button hin, der mit "padding" etwas eingerückt ist, so dass er nicht ganz am Rand klebt.
    Dazu habe ich folgende CSS definiert:

    PHP-Code:
    background-imageurl(image.jpg);
    background-positioncenter center;
    background-repeatno-repeat;
    background-attachmentfixed;
    background-sizecover;
    positionabsolute;
    height100%;
    width100%;
    colorblue;
    padding10px
    Nun habe ich das Problem, dass mir immer ein vertikaler Scrollbalken erscheint, obwohl der Content ganz auf die Seite passt und nicht gescrollt werden müsste.
    Je höher das "padding" ist, desto grösser wird auch der scrollbare Bereich.

    Wie kann ich den Scrollbalken gänzlich verhindern (sofern der Content nicht über die Seite herausragt)?

    Als Demo hab ich hier ein Fiddle aufgesetzt:
    https://jsfiddle.net/gp67caqb/1/

    lg
    janosh

  • #2
    Hi janosh,
    wozu brauchst du den Padding. Mit dem Scrollbalken kann ich dir weiterhelfen. Damit ich nicht stundenlang schreiben muss hier ein passender Artikel -->
    https://wiki.selfhtml.org/wiki/CSS/E...zeige/overflow

    Verwende lieber vh und vw als Einheit als Prozent. vw und vh orientieren sich schließlich nach dem viewport. Vorteil ist auch das vw und vh egal ob Eigenschaften vererbt werden die beiden Werte bleiben konstant ;-)

    Code:
    * {
    margin: 0;
    padding: 0;
    }
    body {
    widht: 100vw;
    height: 100vh;
    }
    .page_layout {
    
    background-image: url(https://www.axiomcommunications.com/wp-content/uploads/2015/04/Arrow-formation-of-birds.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    position: absolute;
    height: 100vh;
    width: 100vw;
    padding: 10px;
    
    }
    Gruss Localfu
    PS: Wenn euch mein Post gefallen hat, dann lasst mir ein "Daumen hoch" da!

    Kommentar


    • #3
      Hallo janosh ,
      versuche dieses CSS:
      Code:
      body, html {
      height: 100%;
      width: 100%;
      }
      
      body {
      margin: 0;
      display: flex;
      }
      
      .page_layout {
      background-image: url(https://www.axiomcommunications.com/wp-content/uploads/2015/04/Arrow-formation-of-birds.jpg);
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      /*position: absolute; */
      /*height: 100%; */
      /*width: 100%; */
      flex: 1;
      color: blue;
      padding: 10px;
      
      }
      Getestet und funktioniert:
      https://jsfiddle.net/Sempervivum/3cg9dep2/2/

      Kommentar

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

      Einklappen

      Themen: 56.802   Beiträge: 430.056   Mitglieder: 28.555   Aktive Mitglieder: 54
      Willkommen an unser neuestes Mitglied, Fohlenfan.

      Online-Benutzer

      Einklappen

      281 Benutzer sind jetzt online. Registrierte Benutzer: 2, Gäste: 279.

      Mit 3.502 Benutzern waren am 23.01.2020 um 18:20 die meisten Benutzer gleichzeitig online.

      Die neuesten Themen

      Einklappen

      Die neuesten Beiträge

      Einklappen

      Lädt...
      X