Wie ein Bild hinter Text in CSS zu setzen?

Question

Ich möchte ein Bild angezeigt werden hinter etwas Text in einem <h1> Tag. Aber wenn ich das Bild hinzufüge, ersetzt es den Text und schiebt den Text darunter.

Screenshots: Before und After

CSS

body { 
    background-color: #1a1a1a; 
} 
header, 
h1 { 
    text-align: center; 
    font-family: CGF Locust Resistance; 
    font-size: 50px; 
    color: lightgray; 
    -webkit-text-stroke: 1.5px #000; 
} 
header { 
    margin: 0; 
    padding: 0; 
    height: 100px; 
    border-bottom: .5px solid #b3b3b3; 
} 
nav { 
    position: relative; 
    top: -5px; 
    margin: auto; 
    padding: 0; 
    list-style: none; 
    width: 100%; 
    text-align: center; 
    border-bottom: .5px solid #b3b3b3; 
} 
nav ul li { 
    display: inline; 
    color: #fff; 
    font-family: CGF Locust Resistance; 
    font-size: 12.5px; 
    padding: 20px; 
} 
.red { 
    color: red; 
} 
#omen { 
    z-index: -1; 
} 

Answer 1

das Bild als Hintergrund-Bild-Header gesetzt. Ist es das wonach du suchst?

Answer 2

h1 { 
    position : abosolute; 
} 

Dies sollte den Trick tun, aber es ist vorzuziehen, ids zu verwenden, anstatt die h-Tags von changeing überall auf Ihrer Seite

Answer 3

diese Parameter auf das Objektbild Setzen Sie in CSS (Beispiel benutzerdefinierte Klassen erstellen):

.image{ 
    position: relative; 
} 

Und diese dem Text:

.text{ 
    position: absolute; 
} 

natürlich haben Sie um diese Klassen auf ihre jeweiligen Objekte zu setzen. Ich hoffe es hilft !

Answer 4

h1 { 
    background: url(the/filepath/to/your/image.jpg) no-repeat center 100px; 
    background-size: 400px auto; 
    } 

Das ist ungefähr, wie Sie ein Hintergrundbild in dieser Situation verwenden würden. center 100px bedeutet horizontal zentriert und 100px von oben (in Bezug auf das Element h1).