Adding Background Image to Div Using CSS

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);
}

Adding a background image to a div element

You mean this?

<style type="text/css">
.bgimg {
    background-image: url('../images/divbg.png');
}
</style>

...

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

How do I add a background image on my DIV tag with CSS

You need to add background-size:cover to #main_wrapper. That should do what you're looking for.

Div with background-image and height auto

You have to declare a valid height for your background div. As Maneesh has said height:auto takes the element content's height.

• They key is to specify a height in vh or px.
• After that you can easily place your text div inside it and set it
  around with either flexbox or position absolute

Check the snippets! :)

CODE WITH FLEXBOX

body {     margin: 0;}
.i-van {   display: flex;   align-items: center;   justify-content: center;   background-image: url(https://www.planwallpaper.com/static/images/3865967-wallpaper-full-hd_XNgM7er.jpg);   background-size: cover;   background-position: center;   max-width: 100%;   height: 100vh;}
#div-inside {   font-size: 100px;   color: white;}

<div class="i-van">    <div id="div-inside">        HELLO    </div></div>

background-image: url('image path');

div {
  border: 2px solid black;
  height:300px;
  width:300px;
  background: url('https://picsum.photos/300/300');
}

<div></div>

<div class="bgimg" style="background-image: url('../images/divbg.png')"></div>