OK thanks for your answer π
I got it to work using a repeater, only one problem, how can I clip the images to the size of the parent item?
Because the last “tile” is drawn outside of it’s parent item, so the background gets bigger than the item it is drawn for. I tries using “clip: true” for the image, but that didn’t change anything.
Source code:
TiledBackground.qml
Item {
id: item
property string imgSource
property int tileWidth: 24
property int tileHeight: 24
Repeater {
id: repeater
property int rows: Math.ceil(item.height / item.tileWidth)
property int cols: Math.ceil(item.width / item.tileHeight)
model: rows * cols
BackgroundImage {
property int col: index % repeater.cols
property int row: Math.floor(index / repeater.cols)
x: item.tileWidth * col
y: item.tileHeight * row
width: item.tileWidth//col < repeater.cols - 1 ? item.tileWidth : (item.width % item.tileWidth)
height: item.tileHeight//row < repeater.rows - 1 ? item.tileHeight : (item.height % item.tileHeight)
source: item.imgSource
clip: true
z: -1
}
}
}