title: How to flip background image in body tag
body: <p>so very new to front end stuff. Sorry about anything extremely obvious that I seem to miss.</p>
  
  <p>Problem: I uploaded a background image, where I'm running a gradient over it. Over that I have some text in a <p> tag. Issue is the image is a) way zoomed in, and B) rotated. I've tried to rotate the image itself but it still seem to display horizontally. Furthermore I've tried doing some vertical flip/horizontal flip something like adding this:</p>
  
  <pre><code>-moz-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
  filter: FlipV;
  -ms-filter: "FlipV";
  </code></pre>
  
  <p>Yet this seems to only flip the text and have no effect on the image -- thanks!</p>
  
  <p>CODE: </p>
  
  <p>css:</p>
  
  <pre><code>body{
    width: 100px;
    height: 100px;
    background-image: 
      url('test.JPG'), 
      linear-gradient(to right, rgb(189, 24, 24), rgb(238, 166, 32));
    background-repeat: no-repeat, no-repeat;
    background-position: center;, right;
    background-blend-mode: multiply;
    max-width: 300px; 
    max-height: 300px;
  }
  </code></pre>
  
  <p>abbrv. html:</p>
  
  <pre><code>&lt;body&gt;
  &lt;p&gt; hi &lt;/p&gt;
  &lt;/body&gt;
  </code></pre>