HTML

eslam said
PRO
eslam said
Pro Student 6,726 Points

text over image

i just wanna check if my code is simple and can be done much easier to center text over image here is my code :

  <secion id="hero-image">
       <img src="../images/left%20section.jpg">
       <h2 class="text">Cheek to Cheek</h2>
  </secion> 
#hero-image {
display: flex;
justify-content: center;
align-items: center;
max-width:564px;
height:644px;
position: relative;
}


img {
max-width: 100%;
}


.text {
position: absolute;
}

3 Answers

Steven Parker
Steven Parker
94,464 Points

I'm going to have to think about that one, I'm not entirely sure how it works at first glance!

I would've just put the text over a background:

<div id="hero-image">
    <h2 class="text">Cheek to Cheek</h2>
</div>
#hero-image {
    max-width: 564px;
    height: 644px;
    background: url(../images/left%20section.jpg);
    background-size: cover;
}

.text {
    padding-top: 50%;
    text-align: center;
}
eslam said
PRO
eslam said
Pro Student 6,726 Points

is there any difference to have an image over a background-image ? i mean is it okay to use background-image property instead of img tag?

Steven Parker
Steven Parker
94,464 Points

I'm not sure what you mean by "okay", do you have some special concern beyond how it looks?

Background images are quite common.

eslam said
PRO
eslam said
Pro Student 6,726 Points

steven i see you`re always trying to help everyone do you mind to share your email ? i have a design to share and take a feedback and i cannot just share it in puplic

Steven Parker
Steven Parker
94,464 Points

I prefer helping where other folks can see and benefit from it also. Plus, posting email in a public forum would be instant spam-bait. :wink: