How To Insert Image Inside of Div Element HTML

November 25, 2021

I am wondering how to insert an image inside of a div element in html. I have tried inserting an image through and through inside of a div element, but none of those have worked for me and I am not sure how to get it to work. I am wondering how to get my image inserted inside of the div element, so my program will actually display it. The problem is that my image never displays and my solutions did not work for me. Here is the simple and full code: https://jsfiddle.net/mxafg1vu/

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<div class="header">
<div id ="header">
<h2 style="text-indent: 1em; font-family: Helvetica; color: blue;">Holograms</h2>
</div></div><br>


<div class="row">
  <div class="leftcolumn">
   <div class="card">
    <div id="title">
      <h2>Holograms In The Future?</h2>
      <h5>November 24th, 2021.</h5>

      <!-- <div class="hologram.jpg" style="height:200px; width: 200px"></div> -->
       <!--Img src -->
      <img src="hologram.jpg" alt="Holograms" width="500" height="500"><br>

      <p>Text </p>
      <p>Text </p>
    </div>
    </div> 
    </div>
    </div>

<div class="footer">
<div id="footer">
 </div>

</body>
</html>

>Solution :

It works! I think that your path is just wrong. In your example the alt tag gets displayed, the picture is trying to load, but is not finding the image.

If the image is in the same directory as the .html:
src="image.png"

If it is in a directory below your .html: src="../asdf/image.png"

And if it isn’t localy stored, they just insert the url, like in my example below:

* {
  box-sizing: border-box;
}

/* Add a gray background color with some padding */
body {
  font-family: Arial;
  padding: 20px;
  background: #32cd32;
}

/* Header/Blog Title */
.header {
  padding: 30px;
  font-size: 40px;
  text-align: center;
  background: #7df9ff;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
  float: left;
  width: 100%;
}

/* Fake image */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Add a card effect for articles */
.card {
   background-color: #87ceeb;
   padding: 20px;
   margin-top: 20px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #00bfff;
  margin-top: 20px;
}

.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-google {
  background: #dd4b39;
  color: white;
}


.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

#hologram {
   width: 48px;
   height: 48px;
}

#container img {
   width: 100%;
}


/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<div class="header">
<div id ="header">
<h2 style="text-indent: 1em; font-family: Helvetica; color: blue;">Holograms</h2>
</div></div><br>


<div class="row">
  <div class="leftcolumn">
   <div class="card">
    <div id="title">
      <h2>Holograms In The Future?</h2>
      <h5>November 24th, 2021.</h5>

      <!-- <div class="hologram.jpg" style="height:200px; width: 200px"></div> -->
       <!--Img src -->
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Stack_Overflow_logo.svg/800px-Stack_Overflow_logo.svg.png" alt="Holograms" width="500"><br>

      <p>Text </p>
      <p>Text </p>
    </div>
    </div> 
    </div>
    </div>

<div class="footer">
<div id="footer">
 </div>

</body>
</html>