Relative path for a background image-CodePudding

I'm trying to get a background image on a website but can't get the relative path correcte (yes, I'm new).

Here is the generic code from w3 schools:

<!DOCTYPE html>
<html>
<head>
<style>
body  {
  background-image: url("paper.gif");
  background-color: #cccccc;
}
</style>
</head>
<body>

<h1>The background-image Property</h1>

<p>Hello World!</p>

</body>
</html>

I have trued using src in place of url and it is not working.  Any suggestions?  Thanks so much in advance.  



I have trued using src in place of url and it is not working.  Any suggestions?  Thanks so much in advance.  I know this is a simple fix but I can't figure it out.

CodePudding user response：

Static content such as images, css and script is typically placed in a folder for those things like an images folder or a content/images folder etc. If that folder is in the SAME folder as your page you can reference is as for example ./images/myimage.png or perhaps a ../../images/myimage.png to go back two levels or /content/images/myimage.png if it is in a root "content" folder.

CodePudding user response：

Well, the order here is important that's why background-color will override the background-image so you have to order them like this:

background-color: #cccccc;
background-image: url("./paper.gif");