title: Organize images horizontally/vertically according screen size in center over background image
body: <p>In <code>&lt;body&gt;</code> <code>&lt;section&gt;</code> I have background image:</p>
  <pre><code>&lt;img src=&quot;img/background.png&quot; class=&quot;back-img&quot;&gt;
  </code></pre>
  <p>css:</p>
  <pre><code>.back-img {
    width: 100%;
    height: auto;
    overflow:hidden;
  }
  </code></pre>
  <p>like this:</p>
  <pre><code>&lt;section&gt; 
      &lt;div id=&quot;topLine&quot;&gt;
          &lt;img src=&quot;img/background.png&quot; class=&quot;back-img&quot;&gt;                                      
      &lt;/div&gt; 
  &lt;/section&gt;  
  </code></pre>
  <p>I'm trying to align different separate square images of same size horizontally in the center over background image in browser window with  <code>position: fixed;</code> to keep it in the center of screen with scrolling and organize vertically on mobile screen:</p>
     
           
  <pre><code>   &lt;img src=&quot;img/square1.png&quot; class=&quot;image&quot;&gt;
     &lt;img src=&quot;img/square2.png&quot; class=&quot;image&quot;&gt;
     &lt;img src=&quot;img/square3.png&quot; class=&quot;image&quot;&gt;                     
  </code></pre>
     
  <p>.css:</p>
  <pre><code>.image {
    position: fixed;
    width: 69px;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  </code></pre>
  <p>to archive something like this:</p>
  <p><a href="https://i.stack.imgur.com/5xmc4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5xmc4.png" alt="enter image description here" /></a></p>
  <p>Background color implies background picture  and white squares is a same size images.</p>
  <p>I've tried this <a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_images_side_by_side" rel="nofollow noreferrer">example</a>:</p>
  <pre><code>&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;column&quot;&gt;
      &lt;img src=&quot;img/square1.png&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;column&quot;&gt;
      &lt;img src=&quot;img/square1.png&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;column&quot;&gt;
      &lt;img src=&quot;img/square1.png&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>with:</p>
  <pre><code>* {
    box-sizing: border-box;
  }
  
  .column {
    float: left;
    width: 33.33%;
    padding: 5px;
  }
  
  .row::after {
    content: &quot;&quot;;
    clear: both;
    display: table;
  }
  </code></pre>
  <p>which not organizes images as required in my case and should align pictures in one line, but with <code>position: fixed;</code> I have only one image on screen.</p>
  <p>I'm trying to find some correct way to get result, maybe with using of <code>&lt;table&gt;</code>, <code>&lt;tr&gt;</code>, <code>&lt;td&gt;</code> to organize different images according screen size from horizontal to vertical group line automatically with browser window manual narrowing.</p>
  <p>First of all, I have to repeat same image in horizontal line in center over background image in fixed position:</p>
  <p><a href="https://i.stack.imgur.com/9mwCw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9mwCw.png" alt="enter image description here" /></a></p>
  <p>Any guide or example would be helpful</p>