<template>
<ol>
<li>no-repeat
<div class="one"> </div>
</li>
<li>repeat
<div class="two"> </div>
</li>
<li>repeat-x
<div class="three"> </div>
</li>
<li>repeat-y
<div class="four"> </div>
</li>
<li>repeat-x, repeat-y (multiple images)
<div class="five"> </div>
</li>
</ol>
</template>
<script setup>
</script>
<style scoped>
li {
margin-bottom: 12px;
}
div {
background-image: url("../assets/big-star.png");;
width: 144px;
height: 84px;
}
.one {
background-repeat: no-repeat;
}
.two {
background-repeat: repeat;
}
.three {
background-repeat: repeat-x;
}
.four {
background-repeat: repeat-y;
}
.five {
background-image: url("../assets/big-star.png"),url("../assets/star.png");
background-repeat: repeat-x, repeat-y;
height: 144px;
}
</style>