Live Preview not showing css background in any Code Editor
Question
The problem is, Live preview for html files are not showing css backgrounds in any code editors (I tested with Brackets, Visual Studio Code and Netbeans) if the image path is not in the directory of the html file. It can't read upper directories and all the code editors can't have the same bug. I'm attaching a screenshot of the problem and the code snippets. I'm on Linux Ubuntu 16.04 and I'm facing this problem ONLY after cleaning my system with Bleachbit. Something is wrong with the live server thing. Previously it was alright. Two days ago, it couldn't show the backgrounds if the entire directory is not in home folder. Now it doesn't show it anywhere. What might be the problem here? Thanks in advance.
tree ~/Desktop/Example
/home/myhome/Desktop/Example
├── Images
│ └── 1.png
└── pages
├── index.htm
└── testing.css
body { max-width: 90%; margin: 0 auto; padding: 1em 2em; font: 100% 'Courier New', monospace; vertical-align: baseline; } .filler { background: url('../Images/1.png') repeat; max-width: 70%; min-height: 300px; margin: 0 auto; } .text-wrapper { max-width: 70%; text-align: center; padding: 1em 1.5em; margin: 0 auto; } h2 { text-transform: capitalize; font: bold 2em 'Open Sans', sans-serif; color: lightgoldenrodyellow; } .para-70 { text-align: justify; color: lightgoldenrodyellow; } .para-70v1::first-letter { font-size: 1.5em; } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 3em; color: whitesmoke; line-height: 10px; white-space: nowrap; }
<!DOCTYPE HTML> <html lang="en"> <head> <title>Testing page</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="testing.css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> </head> <body> <div class="filler"> <div class="text-wrapper"> <h2>A heading</h2> <i class="material-icons">code</i> <p class="para-70 para-70v1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non odio venenatis, sodales dolor eu, mollis erat. Donec in facilisis quam. Donec ipsum dolor, tempus vel arcu molestie, placerat porttitor eros. Aliquam euismod facilisis nisi, eget viverra velit. Aenean semper pulvinar feugiat. Mauris ornare neque quis eros mollis porta. Mauris tempor eu arcu ullamcorper ullamcorper </p> </div> </div> </body> </html>
2 answers
solution1
0 2017-07-10 00:53:23
Try this:
background: url(../Images/1.png)
instead of background: url('../Images/1.png').
Also, see this post for your project structure. Hope it helps :)
solution2
0 ACCPTED 2017-07-10 21:21:41
I found a solution. I also tested with Microsoft's Visual Code Editor, and faced same problem. I guess same will be with Atom too.
Anyways, the solution is - We need to teach localhost about the directory. I don't know how it works but it works. Weird.
I first put the the files out of the folder so the files and the Images folder are in the same parent directory.
tree ~/Desktop/Example
/home/myhome/Desktop/Example
├── Images
│ └── 1.png
├── testing.htm
└── testing.css
└── pages
instead of,
tree ~/Desktop/Example
/home/myhome/Desktop/Example
├── Images
│ └── 1.png
└── pages
├── testing.htm
└── testing.css
And run.
Once the localhost gets the map of what else are in the parent directory, now we can move the html and css files anywhere in that parent directory and it can render the images.
Maybe it's a cache memory thing or something which bleachbit interrupted.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.