CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Adrian Taylor
Adrian Taylor

Reputation: 554

css control position of background image within div

As part of a UI, I'm trying to design a 'compass' widget using html, css & jquery. What I want to achieve is: given a value between 0 and 360, position an image such that it represents the corresponding compass position. For example, a value of 0 should look like this: enter image description here

a value of 90 should look like this:

enter image description here

And so on....

To achieve this, I'm trying to use one big image as a background image in a div tag, and to play around with its position: enter image description here

Here is the css I've tried, In my jquery code, I'm hoping to manipulate the position percentage in order to control the position of the image

#compass{
    background-image: url(../../resources/images/compass2.png);
    background-size: cover;
    background-repeat:repeat-x;
    background-position: 25%;
}

For the life of me, I can't figure out how to explicitly control the position as I want it. For example, the distance from the left edge of the image to the first E letter is approximately 19% of the image width. How would I go about correlating this distance to the background-position value??

Upvotes: 2

Views: 103

Answers (1)

adriancarriger
adriancarriger

Reputation: 3000

Working Fiddle

It looks like your starting point for zero degrees would be about 59.5%, and each degree is worth about 0.20555%. So for each degree you can add 0.20555% to your starting point.

Javascript

function adjustImage() {
    var deg = $('#deg').val();
    var addDeg = 0.20555 * deg;
    var start = 59.5;
    var newDeg = addDeg + start;
    $('#compass').css({'background-position': newDeg + '%'});
}
adjustImage();

HTML

<div id="compass"></div>
<input id="deg" placeholder="enter degrees" type="number" onchange="adjustImage()">

CSS

#compass{
    background-image: url('https://i.sstatic.net/OLVFE.jpg');
    background-size: cover;
    background-repeat:repeat-x;
    background-position: 59.5%;
    height: 91px;
    width: 600px;
    border: 1px solid black;
}

#deg {
    margin: 20px;
    padding: 5px;
}

Upvotes: 3

Related Questions