Modify stilesheet

[AsgharD]

Hi, i have this stylesheet:

html {

  width: 100%;

  /* Vertical colour gradient */

  background-image: linear-gradient(to bottom,  black, midnightblue);

  background-image: -webkit-linear-gradient(top,  black, midnightblue);

  background-attachment: fixed;

  /* Fallback colour */

  background-color: midnightblue;

  /* Vertical centering */

  height: 100%;

  display: table;

}

body {

  /* Remove default styles */

  font-size: 100%;

  background-color: transparent;

  margin: 0;

  /* Vertical centering */

  height:100%;

  display:table-cell;

  vertical-align: middle;

}

#passages {

  border-left: 0px;

  margin: 0;

  /* Keep a gap at the top and bottom of the page,

      when the text is longer than the window's height. */

  padding: 5% 0;

}

.passage {

  /* Passage width */

  width: 60%;

  /* Horizontal centering */

  margin: 0 auto;

  /* Text formatting */

  color: white;

  font-size: 100%;

  text-align:center;

}

/* No sidebar */

#sidebar {

  display:none;

}

/* Links */

a.internalLink, a.externalLink {

  color: cornflowerblue;

}

a.internalLink:hover, a.externalLink:hover {

  color: lightskyblue;

  text-decoration: none;

}

/* Shrink the page when viewed on devices with a low screen width */

@media screen and (max-width: 960px) {

  .passage { font-size: 90%; width: 70%; }

}

@media screen and (max-width: 840px) {

  .passage {  font-size: 87.5%; width: 80%; }

}

@media screen and (max-width: 720px) {

  .passage { font-size: 75%; width: 90%; }

}

And i'd like to put an image as background plus another image on top of every text, like an image with the title and author of the adventure over every passage. Someone can help me? Thank you.