Now that I have the basic grasp of grids, I am wondering how I could take one of these elements - say the red - and have a part of an image as a background to the text? Just to be clear - this would be like taking a screenshot of part of an image where the dimensions of the screenshot are the same as that of the red element. Is that possible?
<!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>
