The problem with doing it the way you are, is that everyone has different sized monitors (browser windows). Some are desktops, laptops, tablets, smartphones, etc. A position of 830 pixels on a smartphone is going to be a layout problem.
PHP, using the PHP GD library, can render (or create) it's own images (JPG, PNG, GIF). So you can take a background image and put another image (such as a bike) over the top of it at any position, merge the two images ... then serve the image.
Using JQuery, that image is displayed on the browser 'full-size' no matter what the user has. If they are using a smartphone, the image will be tiny, but it will still be the entire image. JQuery sizes the image automatically to fit any browser window.
That being said, you first have to deal with saving the accumulated distance using MySQLi or whatever type of database you use. It could be a simple .txt file you are using for a database? It doesn't sound like security is a big issue for your project?
If the users (or members) need to log-in, that creates a whole new aspect to your project. I mention this because someone could put in 5000 miles for their bike trip. You have issues like, can a person remove some miles to correct a typo? Does it need to keep track of miles for each user individually? Are there any date constraints? Is there any other charting or graphing requirements? Is there any GPS usage involved?
PM me with your email (if you want). I'll have you send me the images you wish to use and give you an example of using PHP to render it. Do this with PM (private message), not showing here in public.
Here is a working example of drawing a white line on a background image using PHP GD. The line length/color can be changed to whatever.
Also uses JQuery to resize image for smaller screens. Change your screen size to see it.
FYI: And yes, the image is not to scale. There are about 30 Earth diameters between Earth and Moon.
Instead of a line, you could stack tiny little bicycle images, until the stack reaches the moon.