I'm making a portfolio website that contains a simple dropdownlist and one big GIF image in a div (10659px × 6850px). As I intended, when you make selections from the list, you jump to certain anchor points on the page using a simple javascript that's being activated onChange.

The html:

```
<div id="background">
<img src="img/background.gif" width="10659" /></div>

<select id="dropdownlist" onChange="jumpScroll(this.value);">
<option  alt="selected works" value="0">Selected works:</option>
<option  alt="work 1" value="1">Work 1</option>
<option  alt="work 2" value="2">Work 2</option>
<option  alt="work 3" value="3">Work 3</option>
</select>

```

The javascript:

```
function jumpScroll(inobj) {

switch (inobj) {

case "1":
    window.scroll(1938,2740);
    break;

case "2":
    window.scroll(7753,5483);
    break;

case "3":
    window.scroll(0,1369);
    break;

    default:
    break;
}
}

```

My problem: I want to make the website responsive so that the image has the same ratio on every screen. The width of the image for example will then become 550% instead of 10659px. But then the set anchor points start to move and mismatch, of course. Is there a way to solve this? Maybe to use a javascript or jQuery that uses relative values instead of fixed pixels? Or to cut up the image and make various ID's to refer to? Any tips or answers will be very much appreciated!