Random Image Position in programming website?

I want to make it so I have "enemies" spawn in the background (not THE background, just images on top of it) of a particular webpage at random heights and scroll across the screen. Right now I have something like:

<script>
    function numberRandomizer(){
      var x = Math.floor((Math.random() * 500) + 300); //random number between 300 and 800
      return x;
    }
  </script>

I've tried 2 methods to applying this random variable X to the images that loop by scrolling on screen:

1) Doing what I thought would work and editing each image to get a random value for top and left

  <marquee behavior="scroll" direction="left" scrollamount="numberRandomizer()"><img src="/aboutme/enemy.png" width="120" height="80" top="numberRandomizer()" left="numberRandomizer()"/><p></marquee>

2) Even though as far as I know it would make all enemies have the same position, try out CSS styling to make the placement random just to see if it would work:

 <style>
    img {
      top: numberRandomizer();
      left: numberRandomizer();
    }
  </style>

Neither style works in setting a random value for the image location, am I getting a minor thing wrong or going about this completely the wrong way?

As a bonus question: Is it possible to set marquee to go a random direction per image?