I am wondering whether it’s possible to take an existing element - let’s say the orange in the code that I have written - and instead of having the background orange - instead, fill the element with a snippet of the same dimensions taken from an image?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3 Column 4 Row Excercise</title>
<style>
body {
width: 600px;
height: 800px;
border: black solid 4px;
box-sizing: border-box;
display: grid;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
.red {
background-color: red;
grid-column: 1 / 2;
grid-row: 1 / 4;
}
.yellow {
background-color: yellow;
grid-column: 2 / 4;
grid-row: 1 / 2;
}
.green {
background-color: green;
color: yellow;
grid-column: 2 / 3;
grid-row: 2 / 3;
}
.blue {
background-color: blue;
color: yellow;
grid-column: 2 / 3;
grid-row: 3 / 4;
}
.violet {
background-color: violet;
grid-column: 1 / 3;
grid-row: 4 / 5;
}
.orange {
background-color: orange;
grid-column: 3 / 4;
grid-row: 2 / 5;
}
</style>
</head>
<body>
<div class="red">A red red red</div>
<div class="yellow">B yellow yellow yellow</div>
<div class="green">C green green green</div>
<div class="blue">D blue blue blue</div>
<div class="violet">E violet violet violet</div>
<div class="orange">F orange orange orange</div>
</body>
</html>
