Lection no.-2: Always present your code int the right format (code-block).
Your current provided code…
Your code after pasting into editor…
Do you recognize something?
Your optimized code… (how it should look like)…
import wixData from "wix-data";
//-----------------[ USER-INTERFACE ]-----------------
const REPEATER = 'repeater1';
const SECTION = 'section1';
const BOX = 'box3';
const IMAGE = 'mainimage';
const BUTTON = 'button1';
const CMS = 'Backgrounds';
//-----------------[ USER-INTERFACE ]-----------------
$w.onReady(async()=> {console.log('Page ready...');
let repData = await get_CmsData(); console.log('Repeater-Data: ', repData);
$w(`#${REPEATER}`).data = repData;
$w(`#${REPEATER}`).onItemReady(($item, itemData, index)=> {console.log('Index: ', index);
console.log('Item-Data: ', itemData);
$item(`#${BUTTON}`).onMouseIn(()=> {console.log('Mouse-In');
$w(`#${IMAGE}`).src = itemData.image;
$w(`#${SECTION}`).background = itemData.image;
//$w(`#${BOX}`).style.backgroundColor = itemData.image;
});
// $item("#button2").onMouseOut(() => {
// $w(`#${REPEATER}`).hide();
// });
});
});
function get_CmsData() {
return wixData.query(CMS)
.find()
.then((results)=> {let items = results.items; console.log('Items: ', items);
if (items.length > 0) {console.log('Some DATA has been found!!!');
return items;
} else {console.log('DATA is empty!!!');}
})
.catch((err)=>{console.log(`ERROR: ${err}`);
console.log('Something went wrong!!!');
return [];
});
}
Sorry, yes i know → you do not really recognize it back, because some changes have been done so far on it, but if your have already learned about → USER-INTERFACE ← then you can use this code very fast (even with disconnected your DATASET). 
You will find the working example here…
Your End-Result could look like…
