html div background image not showing up

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


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!

Tags:

Html

Css

Background

Recent Posts