text on top of image css

Answer 1

That's because you're targetting an ID and not a class.

In other words, in the CSS you have the definition for an ID (#cover) and the HTML code has a class:

blah blah

Either change the HTML to have an ID:

blah blah

or change the CSS to target the class name:

.cover{  
  position: absolute;
  background-color: black;
  color: white;
  width: 100%;
  height: 100%;
  border-style: solid 5px;
  top: 0px;
}

UPDATE:

You are giving the .cover a width and height of 100%, but absolute positioned elements don't really "understand" that, so I suggest changing it to: (place the left, bottom and right to the edges, this will fit the div as 100% width and height of the relative parent)

.cover{  
  position: absolute;
  background-color: black;
  color: white;
  left: 0;
  right: 0;
  bottom: 0;
  border-style: solid 5px;
  top: 0px;
}