Adding text to an image using only HTML and CSS

Question

I have a photo of the most recent post on my page and would like to put a small portion of text onto the top left corner of the picture. I have tried code to do so from other online resources, but none of them have worked. Can someone please check why my code isn’t working or provide an alternate method of putting text on an image?

Here is my HTML + CSS:

* {
  margin: 0;
  padding: 0;

}

body {
 

}

nav {
  width: 100%;
  height: 90px;
  background-color: black;
  display: flex;
}

nav h1 {
  text-align: center;
  font-family: arial;
  color: white;
  font-size: 44px;
  line-height: 55px;
  float: left;
  padding: 15px 20px;
  flex: 1 0 auto;


}

nav ul {
 position: absolute;
 right: 0;
}

nav ul li {
  float: left;
  list-style: none;
  position: relative; /* we can add absolute position in subcategories */
  padding-right: 1em;



}

nav ul li a {
  display: block;
  font-family: arial;
  color: white;
  font-size: 20px;
  padding: 34px 14px;
  text-decoration: none;
}


nav ul li ul {
  display: none;
  position: absolute;
  background-color: black;
  padding: 5px; /* Spacing so that hover color does not take up entire chunk */
  border-radius: 0px 0px 4px 4px;
  transform: translateX(1rem);



}

nav ul li:hover ul {
  /* This means when li is hovered, we want the unordered list inside list item to do something. */
  display: block;



}


nav ul li ul li{
   width: 130px; /* increases width so that all text can be fit */
  border-radius: 4px;



}

nav ul li ul li a:hover {
  background-color: #ADD8E6;
a
}

.newest-review-cover img {
  height: 50%;
  width: 100%;

  position: relative;
  display: inline-block;
 

}

.newest-review-cover .newest-review-title {
    position: absolute;
        z-index: 999;
        margin: 0 auto;
        left: 0;
        right: 0;        
        text-align: center;
        top: 120%; /* Adjust this value to move the positioned div up and down */
        background: rgba(0, 0, 0, 0.8);
        font-family: Arial,sans-serif;
        color: #fff;
        width: 60%; /* Set the width of the positioned div */
}

<!DOCTYPE html>
<html>
 
<head> 
 <link href="header+footer.css" rel = "stylesheet" type="text/css" />
 <link href="Homepage.css" rel = "stylesheet" type="text/css" />
  <meta charset="utf-8">
 <title> The Novel Column - Book Reviews </title>

</head>
 

<body>

<nav>

 <h1> The Novel Column </h1>

 <ul>
  <li> <a href="#"> Resources </a>
   <ul> 
    <li> <a href="#"> Book Reviews </a> </li>
    <li> <a href="#"> Quotes and Principles </a> </li>
    <li> <a href="#"> Community Aid </a> </li>
    
   </ul>
  </li>
  <li> <a href="#"> About Us </a> </li>
 </ul>
 
</nav>

<section class="newest-review-cover"> 
 <img src="https://thenovelcolumn.com/wp-content/uploads/2019/06/the-5am-club-poster.jpg" alt="The 5AM Club">

 <div class="newest-review-title">
 <p> The 5AM Club </p>
</div>

</section>



</body>




</html>

Thanks in advance for your help!

Claire · Accepted Answer · 2019-06-05T04:39:43.307

1

For starters, you are targeting your newest-review-title class wrong in your CSS, by using a period between review and title. Change that. Also, try making your container the relative element instead of your image, like so:

.newest-review-cover {
  position: relative;
}

.newest-review-cover img {
  display: block;
  width:100%;
}

.newest-review-title {
    position: absolute;
    display:block;
    z-index: 999;
    margin:0 auto;
     text-align: center;
     top: 50%;
     width: 60%;
     left:20%
}

edited Jun 05 '19 at 04:39

answered Jun 05 '19 at 04:29

Claire

3,146
6
22
37

What’s the difference of using relative position for the container instead of the image?’ – Henry Wang Jun 05 '19 at 04:33
1

@HenryWang absolutely positioned elements look to their parent elements for guidance. It is more difficult and much less clean to position relative to a sibling element. See this: https://stackoverflow.com/questions/10624771/css-sibling-absolute-positioning/10625041#10625041 – Claire Jun 05 '19 at 04:36

marsheth · Answer 2 · 2019-06-05T04:58:41.590

This method provides an alternative solution using the CSS background image property. Then you can place your text in the div using the CSS you already had in place. You can adjust the height by adjusting the height of the div. The size of the image can be adjusted using the CSS background-size property.

* {
  margin: 0;
  padding: 0;
}

body {}

nav {
  width: 100%;
  height: 90px;
  background-color: black;
  display: flex;
}

nav h1 {
  text-align: center;
  font-family: arial;
  color: white;
  font-size: 44px;
  line-height: 55px;
  float: left;
  padding: 15px 20px;
  flex: 1 0 auto;
}

nav ul {
  position: absolute;
  right: 0;
}

nav ul li {
  float: left;
  list-style: none;
  position: relative;
  /* we can add absolute position in subcategories */
  padding-right: 1em;
}

nav ul li a {
  display: block;
  font-family: arial;
  color: white;
  font-size: 20px;
  padding: 34px 14px;
  text-decoration: none;
}

nav ul li ul {
  display: none;
  position: absolute;
  background-color: black;
  padding: 5px;
  /* Spacing so that hover color does not take up entire chunk */
  border-radius: 0px 0px 4px 4px;
  transform: translateX(1rem);
}

nav ul li:hover ul {
  /* This means when li is hovered, we want the unordered list inside list item to do something. */
  display: block;
}

nav ul li ul li {
  width: 130px;
  /* increases width so that all text can be fit */
  border-radius: 4px;
}

nav ul li ul li a:hover {
  background-color: #ADD8E6;
  a
}

.newest-review-cover {
  position: relative;
  height: 383px;
  width: 100%;
}

.newest-review-cover_bg {
  background-image: url('https://thenovelcolumn.com/wp-content/uploads/2019/06/the-5am-club-poster.jpg');
  height: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
}

.newest-review-cover .newest-review.title {
  position: absolute;
  z-index: 999;
  margin: 0 auto;
  left: 0;
  right: 0;
  text-align: center;
  top: 120%;
  /* Adjust this value to move the positioned div up and down */
  background: rgba(0, 0, 0, 0.8);
  font-family: Arial, sans-serif;
  color: #fff;
  width: 60%;
  /* Set the width of the positioned div */
}

<!DOCTYPE html>
<html>

<head>
  <link href="header+footer.css" rel="stylesheet" type="text/css" />
  <link href="Homepage.css" rel="stylesheet" type="text/css" />
  <meta charset="utf-8">
  <title> The Novel Column - Book Reviews </title>

</head>


<body>

  <nav>

    <h1> The Novel Column </h1>

    <ul>
      <li> <a href="#"> Resources </a>
        <ul>
          <li> <a href="#"> Book Reviews </a> </li>
          <li> <a href="#"> Quotes and Principles </a> </li>
          <li> <a href="#"> Community Aid </a> </li>

        </ul>
      </li>
      <li> <a href="#"> About Us </a> </li>
    </ul>

  </nav>

  <section class="newest-review-cover">
    <div class="newest-review-cover_bg">
      <p class="newest-review-cover_title">
        The 5AM Club
      </p>
    </div>
  </section>
</body>

</html>

Can you provide some level of explanation? A code dump doesn't help anyone. — jhpratt, Jun 05 '19 at 04:56

Adding text to an image using only HTML and CSS

2 Answers2