:root {
  --h1farbe: blue;
  --h2farbe: brown;
}

h1 { 
     text-align: center;
     font-size: 3em;
     background: #dedede;
     color: var(--h1farbe);
    }
h2 {
     text-align: center;
     background: #aedede;
     color: var(--h2farbe);
    }
td{
    align: center;
}

    
<!--
https://t3n.de/news/bilder-bildunterschriften-html5-364185/    
    -->
        
html, body {
height: 100%; /* Anzeigebereich in der Vertikalen auf 100% strecken */
}
    
figure {
  padding: 1px;
  float: bottom;
    display: inline-block;
    width: 250px;
  text-align: center;
    margin-left: 0em;
    margin-right:0em; 
  border: 0px solid #fccccc;
  border-radius: 0px;
  min-height: 20%;
  height: auto !important;
    position: relative;
    overflow: hidden;
}
}
 img { display: block; 
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;}
    
   
figure figcaption {
  padding: 1px 1px 1px 1px;
  text-align: center;
  background-color: #cfcfcf;
  color: blue;
  font-style: italic;
  font-size: 1.2em;
  border-radius:10px 10px 10px 10px ;
}
bgzeile{
<div style="background-color: hsla(30,40%,90%,0.5)"> … </div>
}