Heading Hintergrundbild, das an den Rändern und an der Spitze der Seite mit CSS

Question

erstreckt Ich habe eine einfache Seite, wo der gesamte Inhalt (<h1>, , <p>, etc.) in einem <div> enthalten ist, um das gleiche zu haben Breite.

Ich mag die Art, wie der Fließtext aussieht und möchte es so behalten, aber ich möchte der Überschrift ein Hintergrundbild hinzufügen. Es sollte von ganz oben auf der Seite (und in meinem Fall Fenster) beginnen und an der Grundlinie der letzten Zeile der Überschrift enden, während es sich von der linken Seite des Fensters nach rechts erstreckt. Im folgenden Bild habe ich das gewünschte Layout dargestellt. Darunter habe ich die HTML-Hierarchie gezeichnet, die ich versucht habe.

In der Tat habe ich bereits versucht, ein Kind von <h1> mit

width: 100vw; 
position: relative; 
left: 50%; 
transform: translate(-50%); 

zu schaffen, sondern:

1. Seit der Seite hat z-index: -1;, für einige seltsame Fehler kann ich Klicken Sie nicht auf Links mit relativer Positionierung
2. Ich würde es vorziehen, nichtzu verwendenvereint wegen der Browser-Unterstützung.
3. Ich kann immer noch nicht den Hintergrund nach oben erweitern.

Die Schriftgröße von <h1> und seine Ränder sind in Pixeln definiert, wie Sie sehen, aber die Seite verhält sich nach wie vor dynamisch, weil, wie ich die Größe des Fensters, die Anzahl der Zeilen von <h1> zunimmt.

HTML

<div class="page"> 
    <h1>Heading</h1> 
    <h2>Section 1</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
</div> 

CSS

body { 
    height: 100%; 
    width: 100%; 
    margin:0px; 
} 

.page { 
    font-size: 20px; 
    width: 90%; 
    max-width: 70ch; 
    padding: 50px 5%; 
    margin: auto; 
    z-index: -1; 
} 

h1 { 
    font-size: 30px; 
    margin-top: 0; 
    margin-bottom: 10px; 
} 

h2 { 
    font-size: 22px; 
    margin-bottom: 26px; 
} 

p {margin-bottom: 24px;} 

JS Fiddle

Answer 1

Zwei Vorschläge:

Trennen Sie den h1 und den Rest des Körpers in zwei verschiedene Divs. Wende den Hintergrund auf das erste div an.

<div class="background-here"> 
<div class="page"> 
    <h1>Heading</h1> 
</div> 
</div> 
<div class="page"> 
    <h2>Section 1</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
</div> 

Oder Sie könnten nur den Hintergrund für den Körper anwenden und background-repeat: repeat-x oder bakcground-size: cover verwenden. Aber es hängt davon ab, wie das Bild entworfen wurde.