Adding a Background Image to a <Div> Element

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>

HTML - Add a background image to a div

Setting a background on div is easy, do it like

Style

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

Html

<div class="jumbotron text-center bgimg" style="color:#ffffff">
    <h1>HEADING</h1>
    <p>SUBHEADING</p> 
</div>

Give .bgimg css class to div and you can see the background

Background Image Not Applied To Div

Is this what you want?

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

<div></div>

Set Background Image in Div Without Separate CSS

You should use the style element:

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

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.

background-image don't work in div element

You should give your background-image some more information about position.

For example:

.nav-item {
    width: 12%;
    background-image: url('frame.png');
    background-position: center; /* Added */
    background-size: cover; /* Added */
    background-repeat: no-repeat; /* Added */
    margin-top: 80px;
    margin-left: 140px;
}

Read more about the background property at Mozilla Developer Network.

Adding a Background Image to a <Div> Element