Changing background image through window.getComputedStyle

I'm trying to write a function which cycles background-image from 3 different options by button-click, and the code is not working. Maybe someone can tell why...

function changeBackground (){
  console.log('change background');
  var b = document.getElementById('mainbody');
  var bstyle = window.getComputedStyle(b, null).getPropertyValue('background-image');
  if (bstyle == "url('strawberry.png')") {
    b.style.backgroundImage = "url('raspberry.png')";
  } else if (bstyle == "url('raspberry.png')"){
    b.style.backgroundImage = "url('blueberry.png')";
  } else {
    b.style.backgroundImage = "url('strawberry.png')";
  }
}

For example, this code for changing font-size works perfectly.

function changeSize (){ 
  console.log('changing font size');
  var s = document.getElementById('clock');
  var sstyle = window.getComputedStyle(s, null).getPropertyValue('font-size');
  if (sstyle == "25px") {
    s.style.fontSize = "50px";
  } else{
    s.style.fontSize = "25px";
  }
}

var x = 0;
var pics = ['strawberry.png', 'raspberry.png', 'blueberry.png'];
function changeBackground (){
  console.log('change background');
  var b = document.getElementById('mainbody');
  b.style.backgroundImage = 'url('+pics[(x++) % pics.length]+')';
}

I would suggest using a counter variable, as shown above, in order to track the number of times the function is called and update the background accordingly.

The problem that is being experienced is that when JavaScript changes the background image URL, the full absolute path is saved as the computed value in CSS. However, when comparing against it later, this absolute path does not match the relative one that was initially used. Clearly, other attributes, such as font-size, would not experience this same issue.