Search code examples
htmlcsslocalhostubuntu-16.04adobe-brackets

Live Preview not showing css background in any Code Editor

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

screenshot of the problem

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>

Solution

  • 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.