CODEWITHSUNDEEP
htmlcss
Matthew Olsen
Matthew Olsen

Reputation: 1

My hero image isn't appearing, but the text is

My hero image isn't appearing, but the text is. All my files are in the same folder and I'm using the relative path VS Code gave me.

This is the HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="hero-image">
  <div class="hero-text">
    <h1 style="font-size:50px">I am Matthew Moyes</h1>
    <h3>And I'm a Motivational Speaker</h3>
    <button>BOOK ME</button>
  </div>
</div>
<h3>Page content..</h3>
<p>Note that this technique will also make the image responsive: Resize the browser window to see the effect.</p>
</body>
</html>

This is the CSS:

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.hero-image {
  background: url("/city.jpg");
  background-color:#cccccc;
  height: 500px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
h3 {
  text-align:center;
}
p {
  text-align:center;
}

The part I'm having issues with is the .hero-image tag.

I tried putting it in another folder and making a new path as well as re-downloading the image. I also added and removed dots and slashes in the code.

Upvotes: 0

Views: 138

Answers (1)

Vladimir
Vladimir

Reputation: 115

Remove slash from your path like this:

background: url("city.jpg");

And not like this:

background: url("/city.jpg");

Upvotes: 1

Related Questions