html div background image not showing up

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 the code

if anyone can help that would be great!!

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

标签： html css background

4条回答

祖国的老花朵

2楼-- · 2019-03-27 10:20

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.

0人赞添加讨论(0) 举报

该账号已被封号

3楼-- · 2019-03-27 10:23

A fast and small lesson about paths

Absolute paths

http://website.com/folder/image.jpg
IF the image is not on your domain - go look there for image

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

Relative paths

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

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

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

folder/image.jpg
this time folder is in the same place as the document, so go into that sub-folder for the image

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

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

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

0人赞添加讨论(0) 举报

Animai°情兽

4楼-- · 2019-03-27 10:24

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.

0人赞添加讨论(0) 举报

smile是对你的礼貌

5楼-- · 2019-03-27 10:27

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!

0人赞添加讨论(0) 举报