CODEWITHSUNDEEP
htmlcss
Mark Boelte
Mark Boelte

Reputation: 21

hero image not showing

I am having trouble getting the hero image and the background to show up. The files are in the same folder, with images, css, and javascript folders for those files. HTML is in main folder, others are sub-folders. I am using code I found at w3schools that looks like it should work, but I cannot get the images to show. The backup background color does show up.

I read several threads that suggested removing the ", adding a / or .../ to path name, I checked the file name and extension and nothing has worked.

What did I do wrong?

Here is my code: 

html {
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}

body {
  background-image: url("/images/funky-lines.png");
  background-color: #cccccc;
}

.hero-image {
  background-image: url("/images/the-road.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;
}

article,
aside,
footer,
header,
nav,
section {
  display: block
}

nav {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 36px;
}

h1 {
  font-size: 2em;
  margin: .67em 0
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects
}

b,
strong {
  font-weight: inherit
}

b,
strong {
  font-weight: bolder
}

small {
  font-size: 80%
}

img {
  border-style: none
}

button,
input,
optgroup,
select,
textarea {
  margin: 0
}

menu {
  display: block
}

[hidden] {
  display: none
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dorcraft Industries | Fallout 4</title>
  <meta name="description" content="Discussion of Fallout 4">
  <link rel="stylesheet" type="text/css" href="css/styles.css">
  <link href="https://fonts.googleapis.com/css? 
    family=Indie+Flower|Rokkitt|Source+Sans+Pro:700" rel="stylesheet">
</head>

<body>
  <div class="hero-image">
    <div class="hero-text">
      <h1 style="font-size:50px">Dorcraft Industries</h1>
      <h3>in Fallout 4</h3>
    </div>
  </div>
  <!-- <header><img src="images/banner.jpg" alt="Dorcraft Industries banner 
    image">
    </header> -->
  <nav><a href="">Home</a> | <a href="">The Game</a> | <a href="">Characters</a> | <a href="">About Us</a></nav>
  <div>
    <p>Is anything working?</p>
  </div>

</body>

</html>

Upvotes: 0

Views: 4538

Answers (2)

Mark Boelte
Mark Boelte

Reputation: 21

Ok, I changed the links to add two dots (..) in front of the URL and that seems to work. The examples I saw on W3Schools and in answers here showed three dots (...) and that did NOT work.

Thanks, that seems to have solved it.

Upvotes: 1

Thomas Scheffer
Thomas Scheffer

Reputation: 554

Reading your post, your current folder structure is as below.

folder/
  index.html
  css/
    style.css
  images/
    image1.jpg
    image2.jpg
    etc
  js/
    main.js

So when you try to use any image in your css you should add ../ in front of any url directing to an image. This ensures that the file will start looking from one folder up, instead of the current folder.

i.e. background-image: url("../images/image1.jpg")

Upvotes: 0

Related Questions