MrMurphy: Probleme bei Homepage-Erstellung

Beitrag lesen

Hallo

b) beschnitten (nicht vollständig angezeigt) werden soll

b) wäre die gewünschte Option. Gibt es da irgendwo eine Vorlage, an der ich abschauen kann?

Die ist doch schnell selbst erstellt. Zum Testen musst du nur noch Pfad und Name der Hintergrundgrafik setzen.

Je nachdem, welche der drei background-size-Anweisungen "am untersten" steht kannst du die drei Varianten durchtesten.

Durch die "center center"-Angabe bei der background-position wird das Bild entweder oben / unten oder links / rechts gleichmäßig beschnitten.

Die Rahmen (border) kannst du natürlich löschen. Die habe ich nur zum Testen eingesetzt.



<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Mike Hintergrundgrafik</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 120%;   /* Die Einheit rem greift auf die Angabe in html zurück, nicht auf body */
         line-height: 1.3;   /* line-height wird ohne Einheit angegeben */
         -moz-box-sizing: border-box;
         box-sizing: border-box;
         width: 100%;
         height: 100%;
         padding: 0;
         border: 4px solid blue;
         margin: 0;
      }
      body {
         width: 98%;
         color: black;
         background-color: white;
         padding: 0;
         margin: 1rem auto;
         background-image: url(pfad/grafik.jpg);
         background-repeat: no-repeat;
         background-position: center center;
         /* Von den folgenden drei Möglichkeiten jeweils die gewünschte als letzte eintragen */
         background-size: contain; /* mit Rand */
         background-size: 100% 100%; /* verzerrt */
         background-size: cover; /* Bild beschneiden */
         width: 100%;
         height: 100%;
         padding: 0;
         border: 4px solid green;
         margin: 0;
      }
      main {
         width: 100%;
         height: 100%;
         padding: 0;
         border: 4px solid orange;
         margin: 0;
         display: flex;
         align-items: flex-end;
      }
      p {
         padding: 0;
         border: 4px solid yellow;
         margin: 0 auto;
         text-align: center;
      }
   </style>
</head>
<body>
   <main role="main">
      <p>Und hier noch etwas zentrierter Text am unteren Rand</p>
   </main>
</body>
</html>



Gruss

MrMurphy