Background Image Not Applied To Div-CodePudding

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

<div >  
</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...

CodePudding user response：

Is this what you want?

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

<div></div>

CodePudding user response：

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.

CodePudding user response：

You have to add something in the div

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

CodePudding user response：

If you share your code in a codepen it would help. Also adding object-fit: cover may help. Could be a sizing issue.

I would also recommend giving the div some padding so it takes up some space for the image to be displayed in, or you could give it a height and width value.