Putting text on an image - html

Question

I built a simple countdown timer in HTML and now I am looking to put all the text on top of an image. So the image is in the background and the text on top of it.
It's an image of a mac screen and I want text to be inside of the screen if that makes sense :)
Code:
.time-to {
text-align: center;
font-family: Bangers;
color: white;
font-size: 35px;
letter-spacing: 2px;
}
.time-to span {
display: block;
font-size: 80px;
color: #D9D900;
}
.macPic {
position: absolute;
}
<div class="macPic" class="">
<img src="Images/mac.png" class="img-responsive" alt="Responsive image">
<div class='time-to'>
Slutar Midnatt Söndag :
<span countdown='' date='December 3, 2017 12:00:00'> </span>
</div>
</div>

Answer 1

.time-to {
text-align: center;
font-family: Bangers;
color: white;
font-size: 35px;
letter-spacing: 2px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.time-to span {
display: block;
font-size: 80px;
color: #D9D900;
}
.macPic {
position: absolute;
}
<div class="macPic" class="">
<img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" class="img-responsive" alt="Responsive image">
<div class="centered">
Slutar Midnatt Söndag :
<span countdown='' date='December 3, 2017 12:00:00'> </span>
</div>
</div>

Answer 2

img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Because the image has a z-index of -1, it will be placed behind the text.

Answer 3

you could use background image, correct me if I misunderstood your question
<div class="macPic" class="background-image: url("Images/mac.png");">
<div class='time-to'>
Slutar Midnatt Söndag :
<span countdown='' date='December 3, 2017 12:00:00'> </span>
</div>
</div>

Answer 4

Two possible solutions:
(1) Set your image as background image for div class="macPic":
.macPic {
background-image:url('Images/mac.png');
}
(2) Use positioning as explained here to let the text float on top of the image:
.macPic { position:relative; }
.time-to { position: absolute; }
.img-responsive { position: absolute; }

Answer 5

Do as follow
.macPic {
position: relative;
}
.time-to {
position: absolute;
/* You can replace * with any value that you like */
top: *px;
bottom: *px;
right: *px;
left: *px;
}

Answer 6

Try this CSS...
.time-to{
position:absolute;
top:50%;
left:10%;
}

Answer 7

Put mac.png image into css folder and add this code to your external file
.macPic { background-image:url('Images/mac.png'); }