Html Div Background Image Not Showing Up

January 30, 2023 Post a Comment

I'm working on a webpage (I'm a newb of course) and the background image won't show up in the div. I tried both background-image and background and they both will not work... heres

Solution 1:

I recommend moving your css from the inline scope. Assuming that your .png file actually exists, try setting the background size and repeat tags.

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
body {background-color:gray;}
#mydiv {
   background-image: url('/ximages/websiteheader1.png');
   background-repeat:no-repeat;
   background-size:contain;
   height:200px;width:1200px;
}
</style>
  </head>
<body>
  <div id="mydiv">
  </div>
</body>
</html>

If that doesn't work, try checking in your browser's developer tools for the response codes and making sure that the url is correct.

Hope this helps!

Solution 2:

A fast refresher about paths

Absolute paths

https://website.com/assets/image.jpg

//website.com/assets/image.jpg
image loaded using http or https protocols

Relative paths

(For internal use if the image is on the same server)

image.jpg
image in the same folder as the document calling the image!

./image.jpg
Same as above, image in the same folder as the document calling the image!

/assets/image.jpg
Similar to Absolute Paths, just omitting the protocol and domain name
Go search my image starting from my root folder /, than into assets/

assets/image.jpg
this time assets is in the same place as the document, so go into assets for the image

../assets/image.jpg
From where the document is, go one folder back ../ and go into assets

../../image.jpg
go two folders back, there's my image!

../../assets/image.jpg
go two folders back ../../ and than go into assets

Solution 3:

For me it was because i was using an angular element directive to set the background but i forgot to set "display" to "block". Ugh! I spent forever troubleshooting this! Had it been an attribute directive i likely would not have encountered this.

Solution 4:

I had the same problem I corrected the relative path to start from the same folder as the page and it worked: url(./images/1.jpg) instead of url(/images/1.jpg) I read somewhere that it's better to do so always. let me know if it works.

Solution 5:

actually, the same problem has gone with me. the solution is here for that problem. you have to change your path background-image: url('/ximages/websiteheader1.png'); TO background-image: url('ximages/websiteheader1.png');

actually, remove the first / from the path of the image.

Html5 Info