Looking at
.imageA
code - I am trying to place a background image into this element. I thought from watching a YouTube video on the subject that
<img src="https:unsplash.it/400/200">
would return a random image from Unsplash with dimensions of
W400 H200. I think there might be an additional step that I am missing here but I can’t figure out what.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>4 Column 3 Row Project With 3 Images</title>
<style>
body {
box-sizing: border-box;
width: 800px;
height: 600px;
border: 4px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.imageA {
grid-column: 1 / 3;
grid-row: 1 / 2;
<img src="https:unsplash.it/400/200">
}
.imageB {
grid-column: 2 / 4;
grid-row: 2 / 3;
background-color: rgb(233, 219, 219);
}
.imageC {
grid-column: 1 / 5;
grid-row: 3 / 4;
background-color: rgb(233, 219, 219);
}
</style>
</head>
<body>
<div class="imageA">Image A</div>
<div class="h2text">H2 Text</div>
<div class="h1headline">H1 Headline</div>
<div class="imageB">Image B</div>
<div class="4links">4 Links</div>
<div class="imageC">Image C</div>
</body>
</html>