How to align elements to a background on a responsive site

Question

I am working on a responsive site http://www.pegasuswd.com/mountain-climb/ that has a lot of graphical elements. One element is a set of markers that appear along a pathway in the design. at any given point in time there can be anywhere between 1 to 100 markers on the pathway at random locations set through the css. The problem is that as the site scales, the markers shift positions and no longer follow the path. The markers are ideal at about 1450 X 850 px. (They are removed at 700px wide.)

I'm looking for a way to keep them on the path at all sizes. I'm thinking that a jQuery solution is needed here to detect the height and reset the markers along the path but I'm not sure. Ideally I would like to do it with CSS. Does anyone have recommendations or pointers for how to keep the markers on the path while the site scales?

Answer 1

Without writing a billion media queries (CSS only), I really only see a couple of ways to do this:

• include the markers in the mountain image
• use JavaScript and listen for the window resize event and adjust the marker locations accordingly

Answer 2

Here is a possible solution using the JS provided by: Is it possible to dynamically scale text size based on browser width?

Instead of using pixels to style everything in your container, consider switching to ems. Initially give your container for everything that needs resized a font-size: 100%;. After converting all sizes to em instead of px, the following JS will adjust the size of each element using em proportionally keeping everything aligned and ultimately, making it completely responsive.

$( document ).ready( function() {
            var $body = $('#container'); //Cache this for performance

            var setBodyScale = function() {
                var scaleSource = $body.width(),
                    scaleFactor = 0.35,                     
                    maxScale = 600,
                    minScale = 30; //Tweak these values to taste

                var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor:

                if (fontSize > maxScale) fontSize = maxScale;
                if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums

                $('body').css('font-size', fontSize + '%');
            }

            $(window).resize(function(){
                setBodyScale();
            });

            //Fire it when the page first loads:
            setBodyScale();
        });