CODEWITHSUNDEEP
htmlcss
Tyadan
Tyadan

Reputation: 131

CSS positioning of text over image

I'm currently trying to fiddle around with Html and css and want to position text over an image. I have managed to do this on my homepage and figured I'd use the same class and the text would be positioned correctly aswell. The homepage looks like this: Homepage The html code looks like this: 

<div class="textoverimage">
     <img src="./imgs/Restaurant.jpg" alt="me">
     <div class="textforoverimage"><h2>Second year IT student</h2></div>
 </div>`

The css looks like this:

.textoverimage img{
    object-fit: cover;
    width: 100%;
    height: 277px;
    position: relative;
    text-align: center;
    color: white;
  }
.textforoverimage h2{
    position: absolute;
    width: 100%;
    top: 18%;
    color: white;
    font-family: 'Segoe UI';
    font-size:60px;
    text-align: center;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
  }

The about me page, in which I want to achieve the same effect of text over image, but only on the second image looks like this: About page

The html code looks like this:

<div class="textoverimage"> <img src="./imgs/Restaurant.jpg" alt="Restaurant"> <div class="textforoverimage"><h2>Jobs & Schooling</h2></div> </div>

As you can see, the Jobs and schooling text is shown at the top of the page. I thought that because textforoverimage was positioned absolute it would be moved according to the position of its parent, which I thought was the textoverimage div. However it seems to be positioned according to the page.

What am I doing wrong? Am I using the position property wrong or is it a html mistake?

Upvotes: 1

Views: 576

Answers (1)

Johannes
Johannes

Reputation: 67748

Apply position: relative to .textoverimage , not to the image - that's the parent element which needs to function as an anchor for the absolute position of its child element. And apply position:absolute to .textforoverimage , not to the h2 which it contains.

Upvotes: 1

Related Questions