Can't Quite Place Background Image

Looking at
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="">
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">
    <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>
     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="">
     .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);
    <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>

you can’t put an html tag in the css

if you want to give a background image to the .imageA class you need to use the appropriate property, for example this:

also I think the url you have is wrong, it can’t start with https: it needs to be https://

ah yes - html belongs in the body not the CSS - how embarrasing🙃
thanks for setting me straight - I’m spending too much time on this at one sitting - that’s the problem🙂