'A background image does not display as part of the div container [closed]

I am trying to create a div container. I need to use a transparent picture as a background, include a separate picture in the div and some text. I am doind the following:

div {
  width: 500px;
  height: 500px;
  background-image: url('explore_block.png');
}
<div> 
  <img src="img_girl.jpg" alt="icon">
  <p>This paragraph has its own background color.</p>
</div>

The filepath is correct, however the picture does not appear. Could you provide any help? Thank you!:)

htmlcss


Solution 1:[1]

It's simple. You left a double colon, after the background-image. ;) It works now.

  <head>
  <style>
  div {
      width:500px;
      height:500px;
      background-image: url('explore_block.png');
  }
  </style>
  </head>


 <body>
 <div> 
 <img src="img_girl.jpg" alt="icon">
 <p>This paragraph has its own background color.</p>
 </div>
 </body>


 </html>

Solution 2:[2]

Tricky one, could you try using

background-size: cover

See how that goes, it's hard to see without a visual representation :)

Solution 3:[3]

Ger rid of ' inside url also -img

 div {
  width: 500px;
  height: 500px;
  background: url(explore_block.png);
}

Working fiddle : https://jsfiddle.net/9acajpkk/2/

Solution 4:[4]

Try adding the following CSS to your div. 

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;


div {
  width: 500px;
  height: 500px;
  background-image: url("explore_block.png");
  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
<div> 
  <img src="img_girl.jpg" alt="icon">
  <p>This paragraph has its own background color.</p>
</div>

Solution 5:[5]

Try this: 
<html>
<head>
<style type="text/css">
div {
  width: 500px;
  height: 500px;
  background-image: url('backgroundimg.jpg');
}
</style>
</head>
<body>
<div> 
  <img src="logo.jpg" alt="icon">
  <p>This paragraph has its own background color.</p>
</div>
</body>
</html>

Solution 6:[6]

your html and css works fine.. give right image path and check once again.

with/without (apostrophe) ' ' also it works..

Working Jsfiddle

https://jsfiddle.net/klakshman318/koh7dx5z/1/

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 Sütemény András
Solution 2 Shaun Moore
Solution 3 Hameed Basha
Solution 4 Granny
Solution 5 Shishir M
Solution 6

Related Questions