Can you place an image with the div class like this in html?-CodePudding

I'm taking a college class where I have to design a website using html/css. The professor wants us to follow this packet he made with step by step instructions. I'm having a problem with this part where he wants us to put an image on the website. He never taught us how to use the div class, but I did some googling and it seems like the instructions he gave us won't work, or it's missing something.

Here are his instructions:

Do not use the tag to place the image onto the webpage. Instead, place the image using the following steps:

Add an empty , and give the div a name using the id attribuite.
Using an embeded stlye:

set the picture as the background to the , using the CSS background-image property
prevent the picture from being "tiled" across the , using the CSS background-repeat property
centers the image using the background-position property
set the size of the image to 400 pixels by 400 pixels, using the background-size property

Here is my code

<head>
    <style>
        #picture{
            background-image:url(Picts/test.jpg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 400px 400px;
        }
    </style>
</head>
<body>
    <div id="picture">

    </div>


 </body>

Is there something that I'm doing wrong here? From what I found it looks like the only way for the image to be rendered is if something is in the div class, such as text, but the he want's us to follow the instructions exactly as he has them. Also the path name is correct.

CodePudding user response：

This happens because you didn't resize the div, so the image doesn't show up

#picture {
  background-image: url(https://images.unsplash.com/photo-1648994517762-15aae4c01ce7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 400px 400px;
  
  /* add dimension div */
  width: 400px;
  height: 400px;
}

<div id="picture"></div>

CodePudding user response：

The professor is always right my friend. You were not modifying the right properties:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <style>
      #picture {
        background-image: url("Picts/test.jpg");
        background-repeat: no-repeat;
        background-position: center;
        width: 400px;
        height: 400px;
      }
    </style>

    <div id="picture"></div>
  </body>
</html>

CodePudding user response：

Your hunch is correct - since there's no content in the <div></div> itself, it's rendered by most user agents at 0 height by default. You'll need to explicitly declare its height, at least:

#picture {
  height: 400px;
  background-image: url(https://placekitten.com/400/400);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 400px 400px;
}

<div id="picture">

</div>

With this discrepancy in mind, I would recommend reaching out to your professor for further guidance.