CODEWITHSUNDEEP
htmlcss
Noelle Silo
Noelle Silo

Reputation: 13

Inserting Text above image

-i set the background on black -i set an image and changed the opacity so that it will blend in with the background. -tried to create a text above the image but it wont show.

Here is a preview of the website:

preview

and the following are the code that i did :)

/* Unfortunately the "---Greetings" text cant be seen in the preview and i tried finding it by changing colors just in case it was just misplaced but it didnt.

I tested another picture without the opacity, it worked but when i tried lessening it it disappears again :( */

body {
  background-color: black;
}

.container img {
  position: absolute;
  top: 430px;
  left: 670px;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 101%;
  min-height: 50%;
}

.container {
  display: inline-block;
  opacity: 0.8;
  position: relative;
  top: -50%;
  left: -50%;
  width: 100%;
  height: 100%;
  color: red;
}

.mid-left h1 {
  position: absolute;
  left: 25px;
  top: 10px;
}

.navbar {
  text-align: center;
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 5px;
  right: 0px;
  background-color: black;
}

.navbar a {
  text-decoration: none;
  color: white;
  font-family: "montserrat-extrabold", sans-serif;
  font-size: 15px;
  letter-spacing: 3px;
}

.navbar ul {
  display: inline-block;
  list-style: none;
  padding: 10px;
  margin: 20px;
}

.navbar li {
  float: left;
}

.navbar li+li {
  margin-left: 20px;
}


/*changing of color when hover*/

.navbar a:hover {
  text-decoration: underline;
  color: red;
  transition: 0.6s;
}


/*add color to the selective link*/

.navbar a:active {
  background-color: transparent;
}
<!DOCTYPE html>
<html>

<head>
  <title> R E S U M E</title>
  <link rel="stylesheet" href="home.css">
  <link rel="stylesheet" type="text/css" href="font.css">
  <meta charset="utf-8">
</head>

<body>
  <!-- 		<div id="bg">
			<img src="Cover1.jpg" alt="">
		</div>
 -->

  <div class="container">
    <img src="Cover1.jpg" alt="Me">
    <div class="mid-left">
      <h1>----- Greetings!</h1>
    </div>
  </div>

  <header class="flex flex-vertical-center">

    <div class="navbar flex flex-horizontal-center">
      <ul>
        <li class="navitem"> <a href="home.html" class="active"> Home </a> </li>
        <li class="navitem"> <a href="personal.html">Personal</a></li>
        <li class="navitem"> <a href="education.html">Education</a></li>
        <li class="navitem"> <a href="experience.html">Experience</a></li>
        s
      </ul>
    </div>
  </header>

</body>

</html>

Upvotes: 0

Views: 119

Answers (1)

Aldo Maria Landini
Aldo Maria Landini

Reputation: 157

You don't see .mid-left because 

.container {
  ...
  top: -50%;
  left: -50%;
}

You have to remove top and left with these value. Furthermore I suggest to you to use background-image: url('Cover1.jpg') on .container and remove <img src="Cover.jpg" alt="Me">

Upvotes: 1

Related Questions