visyvig

vatt its show you is vatt i give, or: Vill I show you very israeli genius.

by Moshe Flam

HTML

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="w3-theme-teal.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-teal.css">
<!-- https://www.w3schools.com/w3css/4/w3.css -->
<!-- https://www.w3schools.com/lib/w3-theme-teal.css -->
<div id="main-container" class="w3-container">
  <div id="main-card" class="w3-container w3-card w3-theme">
    <h5>Vysivyg - Aura Theme Viewer</h5>
  </div>

<!--  <header class="w3-container w3-text-theme" style="width:100%">-->
    <!--<h4>Ven Yisraeli Spelling Is Verifyings You're Geonut</h4>-->
    <!--<h4>Virtual yarn system internally venture stacked guidance</h4>-->
    <!--<h4>Voht you see is voht you get</h4> -->
<!--  </header> -->
  <div class="w3-container w3-half w3-mobile">
    <section id="section--theme-results" 
             class="w3-card-4">
      <header id="results-header" class="w3-theme"><h4>Theme results</h4></header>
      <main id="results-main" class="w3-card-4 w3-main" >
        starts here<br>
        <br> 
        <br> 
        <br> 
        <br> 
        <br>
        <br>
        &nbsp;&nbsp;&nbsp;&nbsp; I should not have to fill this with content<br> 
        &nbsp;&nbsp;&nbsp;&nbsp; and I want the whole backgrond image<br>
        &nbsp;&nbsp;&nbsp;&nbsp; to be shown. <br>
        <hr />
        &nbsp;&nbsp;&nbsp;&nbsp; another line <br>
        &nbsp;&nbsp;&nbsp;&nbsp; another line <br>
        &nbsp;&nbsp;&nbsp;&nbsp; another line <br>
        &nbsp;&nbsp;&nbsp;&nbsp; another line <br>
        &nbsp;&nbsp;&nbsp;&nbsp; another line <br>
        &nbsp;&nbsp;&nbsp;&nbsp; another line <br>
        &nbsp;&nbsp;&nbsp;&nbsp; another line <br>
        &nbsp;&nbsp;&nbsp;&nbsp; another line <br>
        &nbsp;&nbsp;&nbsp;&nbsp; another line <br>
<!--        &nbsp;&nbsp;&nbsp;&nbsp; another line <br>
        &nbsp;&nbsp;&nbsp;&nbsp; another line <br>
        &nbsp;&nbsp;&nbsp;&nbsp; another line <br>
        &nbsp;&nbsp;&nbsp;&nbsp;...

CSS

#section--theme-results {
  display: flex;
  flex-direction: column;
}
#results-header, #results-footer {
  display: flex;
  flex-direction: column;
}
#results-main {
  overflow-y: scroll;
  flex: auto;
  /*background-size: cover;*/
  background-image: url('https://goo.gl/TFeKoc');
  background-repeat: no-repeat;
}

JavaScript

// https://stackoverflow.com/questions/206652/how-to-create-div-to-fill-all-space-between-header-and-footer-div