Adding Images to the center of the DIV

Question

How do you apply and image background in a DIV and at the same time put a text exactly in the center of this div?

What I tried to do so far was this:

<div ID="PrimeiraImagem">Aprenda Inglês Online</div>

In CSS it´s like this:

#PrimeiraImagem{
height: 300px;
width: 100%;
background-image: url(BG/LucasCassimiroSenaColombo.jpg);
background-size: 1350px 300px;
background-attachment: scroll;
margin-left: -8px;
margin-top: -21px; 

color: white;
font-family: Helvetica;
font-size: 15px;
position: 50% 50% 50%;

}

I want the text to appear in front of the image, that´s why I put it as background.

score 0 · Accepted Answer · answered Aug 26 '20 at 00:31

div {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/andromeda-galaxy-royalty-free-image-1585682435.jpg") no-repeat;
  background-size: cover;
}

<div>
  <img width="80px" src="https://vignette.wikia.nocookie.net/spaceagency/images/2/2c/Sketch-1537542336514.png/revision/latest?cb=20180921151148">
</div>

Adding Images to the center of the DIV

1 Answers1