Help with image displaying on header <solved>

Hi, so after I did that cafe menu course, i made one of my own. and i was really proud of how it was looking. then i stepped away from it for a few days. last night when I went to show it to a family member I noticed that the background-image on the header wasnt displaying anymore.(i think maybe something got screwed up when i uploaded it through git) I tried everything i could think of. renaming the photo, making a changing it for a differnt one. i tried taking it out of my “photos” folder, making a new “header” section in my css document. and idk what to do now, like i cant focus on learning right now cause its bugging me.

heres my project GitHub - Wannabedev720/TequeManialv at 9423fd3d26a75b753055e563943808ba6fd4b7ae

heres what it was looking like before i uploaded it through git


the “Teque Mania” logo isnt showing up anymore.

Is there a live server for that repository? Have you tried using z-index? It might just be hiding behind elements.

It would be nice if you could put your code in codepen so we can manipulate it live and see the problem

1 Like

sorry im still learning all this, I barely know about repositories, and thanks for showing the the z-index, I tried it but maybe im not using it correctly?

header{
  background-image: url("headers.png");
  z-index: -1;
  background-size: 65% 36%;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  padding-bottom: 40px;
  margin-top: auto;
}

I checked your HTML. You have no img element above your nav. I can only see a header, perhaps check your HTML? You put z-index to 1, not negative as it will purposely put it behind.

1 Like

that’s because the image is in my css file as the background-image

h1, h2{
  text-align: center;
  font-family: Impact;
}
main{
  background-color: orange;
}
a {
  color: black;
}
a:visited{
  color: black;
}
a:hover{
  color: blue;
}
a:active
{
  color: white;
}

.menu{
  width: 80%;
  background-color: yellow;
  margin-top: auto;
  margin-left: auto;
  margin-bottom: auto;
  margin-right: auto;
  padding: 20px;
  border: 5px solid black;
}
header{
  background-image: url("headers.png");
  z-index: 1;
  background-size: 65% 36%;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  padding-bottom: 40px;
  margin-top: auto;
}
section{
  background-color: white;

}
td{
  width: 1%;
  font-size: 18px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
}
article{
  background-color: yellow;

}
body{
  background-color: orange;
  font-family: sans-serif;
  padding: 40px;
}
.contact{
  background-color: white;
  width: 10%;
  margin-left: 15px;
  padding: 20px;
  border: 1px solid blue;

}
nav{
  background-color: yellow;
  width: auto;
}
.about{
  background-color: white;

  width: 1000px;
}
.established {
  font-style: italic;
}
hr{
  height: 1px;
  background-color: black;
  border-color: black;
}

the problem is in my

<link rel="stylesheet" type="text/css" href="css/styles.css">

when I took my css file out of my css folder and changed the href to href=“styles” it works

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.