'Background Image Not Applied To Div

I'm new to CSS and I wanted to add a background image to a div like this:

<div class="col-4 customBack">  
</div>

And here goes the background image:

.customBack{
    background-image: url("img/shadow3.png") !important;
}

But it didn't apply into the div and does not show the image as background!

So how can I show this background properly...

htmlcsstwitter-bootstraptwitter-bootstrap-3


Solution 1:[1]

Make sure that the .customBack occupy some space. The image may not be showing because the div does not occupy any space. If it does not occupy any space try adding width and height styles or adding some content within the div. If the image still does not appear, try adding background-size: cover; to the .customBack. Also make sure the image path is accurate.

If it does not work, try sharing a codepen with us, then it will be easier to help you.

Solution 2:[2]

You have to add something in the div

<div class="col-4 customBack">
  <p>some text here for example</p>
</div>

Or you can inizialize width and height value

.customBack{
    width: 250px;
    height: 250px;
    background-image: url("img/shadow3.png") !important;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Khalil
Solution 2 user16789193

Related Questions