How to Put an Image in Div with CSS

How to put an image in div with CSS?

This answer by Jaap :

<div class="image"></div>

and in CSS :

div.image::before {
   content:url(http://placehold.it/350x150);
}

you can try it on this link :
http://jsfiddle.net/XAh2d/

this is a link about css content
http://css-tricks.com/css-content/

This has been tested on Chrome, firefox and Safari. (I'm on a mac, so if someone has the result on IE, tell me to add it)

Contain an image within a div?

Use max width and max height. It will keep the aspect ratio

#container img 
{
 max-width: 250px;
 max-height: 250px;
}

http://jsfiddle.net/rV77g/

How do I fit an image (img) inside a div and keep the aspect ratio?

You will need some JavaScript to prevent cropping if you don't know the dimension of the image at the time you're writing the css.

HTML & JavaScript

<div id="container">
    <img src="something.jpg" alt="Sample Image" />
</div>

<script type="text/javascript">
(function() {

var img = document.getElementById('container').firstChild;
img.onload = function() {
    if(img.height > img.width) {
        img.height = '100%';
        img.width = 'auto';
    }
};

}());
</script>

CSS

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

#container img {
   width: 100%;
}

If you use a JavaScript Library you might want to take advantage of it.

How To Insert Image Inside of Div Element HTML

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>

Adding background image to div using CSS

You need to add a width and a height of the background image for it to display properly.

For instance,

.header-shadow{
    background-image: url('../images/header-shade.jpg');
    width: XXpx;
    height: XXpx;
}

As you mentioned that you are using it as a shadow, you can remove the width and add a background-repeat (either vertically or horizontally if required).

For instance,

.header-shadow{
    background-image: url('../images/header-shade.jpg');
    background-repeat: repeat-y; /* for vertical repeat */
    background-repeat: repeat-x; /* for horizontal repeat */
    height: XXpx;
}

PS: XX is a dummy value. You need to replace it with your actual values of your image.

Set background image of div in CSS

Like @N.B. said: div's height is missing.
Fiddle

HTML:

<div>
  <div class="background"></div>
</div>

CSS:

.background {
  width: 100%;
  height: 50px;
  background-image: url(http://via.placeholder.com/1920x900);
}

Remember your div's height can't be 100% as long as your parent div's height is not set.

If you want 100% width and height use
this

HTML:

<div class="template">
  <div class="background-parent">
    <div class="background"></div>
  </div>
</div>

CSS:

div.background-parent
{
  position: relative;
  width: 100%;
  height: 600px;
}
.background {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(http://via.placeholder.com/1920x900);
}

How do I position an image at the bottom of div?

Add relative positioning to the wrapping div tag, then absolutely position the image within it like this:

CSS:

.div-wrapper {
    position: relative;
    height: 300px;
    width: 300px;
}

.div-wrapper img {
    position: absolute;
    left: 0;
    bottom: 0;
}

HTML:

<div class="div-wrapper">
    <img src="blah.png"/>
</div>

Now the image sits at the bottom of the div.

Image in div with :after or :before?

For an background image to show on pseudo-elements like ::after and ::before you should include content: ''; on them.

I've fixed (you were trying to target ids with class selectors) and added the mentioned background image on on this fiddle. But it goes like this:

.div1 {  background: #324458;  color: #FFF;  font-size: 0.9em;  font-weight: bold;  padding: 10px;  width: 100%;  position: relative;  border-radius: 4px;  height: 40px;  clear: both;  overflow: hidden;}
.div1::after {  content: '';  background: url("https://unsplash.it/200/300");  background-position: center center;  background-size: cover;  opacity: 0.3;  height: 39px;  margin: -10px;  width: 300px;  position: absolute;  right: 10px;  border-top-right-radius: 4px;  border-bottom-right-radius: 4px;  z-index: 0;}

<div class="div1">  Text</div>

How to Put an Image in Div with CSS