How to put an image behind text in CSS?
17,173
Solution 1
Set the image as a background-image of header. Is that what you're after?
Solution 2
h1 {
background: url(the/filepath/to/your/image.jpg) no-repeat center 100px;
background-size: 400px auto;
}
That's approximately how you would use a background image in this situation. center 100px
means horizontally centered and 100px from the top (in relation to the h1
element).
Author by
Cian OT
Updated on June 05, 2022Comments
-
Cian OT almost 2 years
I want an image to be displayed behind some text in an
<h1>
tag. But when I add the image it replaces the text and pushes the text below it.Screenshots : Before and 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; }