My css only works when I open it with live-server. I didn't realized it until I tried opening the file
of my projects. The JS functionality is there, but my project is just stale, just black and white. I'm using sass and live-sass compiler. And also using a map api leaftlet and open weather api. SO please help,
cannot seems to figure out why my css is not present when I open my project on file or in another browser.
I have seen through your file and I think your issue is your image hasn't been loaded.
You have an image of the starry sky, right? You can only see the black and white page with some icons after the search because your image hasn't been loaded.
As you access the page by opening the file, the image URL in your CSS file is the path relatives to the current CSS file, which means the URL should be ../image/night.jpg.
If you access the page through the live server, that URL is the path relative to your host.
Hope that I understand your problem correctly. I am still learning too :)
In my summernote editor I have the problem that the font icon isn't working while I see it back in the html. I am wondering how to fix this issue?
Thanks!
I faced this problem a while ago and solved by:
The fonts used by summernote is not the bootstrap one. They have their own font directory. One can check the console (Ctrl+Shift+I) in web browser for any error. One may have to edit the summernote.css file if they are not located in the default folder for Summernote like adding "../" in front of all the font references at the top of the css file.For my application, I had put it under /static/css/font for the server to find it.
To check whether the server is able to find the directory, one can also check the network by right click -> Inspect element-> change to network tab:
I deleted mistakly my child theme in wordpress site.
Is there any way I can get CSS contant somewhere cached over internet?
I accidentally wiped a CSS file, the website was still cashed so I inspected one of the elements and viewed the cached css resource and copied it from there.
If you were using Chrome, and had open the style.css file at least once then you may use this method to recover the cache:
chrome://cache/
You will get all the list of cached data there. Then ctrl+f to find the style.css for the same.
Once you find it. Copy all the data => Go Here and paste it in the text box.
See if it works.!
or you can try to open cache:domain.com as well.
Good day.
My structure is like this:
/
index.html
style/
main.css
images/
test/
test.html
/style/main.css says something like this:
body {
background-image: url('/images/SomeImage.png');
background-color: #000;
}
/index.html has a link to this CSS file, but, as the title says, no image will load. But it's connected though, cause the background is actually black, so the rest of the style (but images) does work.
Also, if I write the same style internally into /index.html the background will load.
Also, I created /test/test.html which says nothing but
<img src="/images/SomeImage.png" />
and the image is displayed on that page.
So, obviously, for some reason my /style/main.css can't reach files, that any other file from any other location reaches. Why does this happen? There's clearly nothing wrong with the syntax. I'm lost.
add ../ to the beginning of /images so it read ../images/imagename.jpg
Here's what your code should be:
body {
background-image: url('../images/SomeImage.png');
background-color: #000;
}
Because your image is in another folder (thats a level up than your style sheet), you need to start with "../" for a level up folder in hierarchy relative to the style sheet. So you need a relative URL:
background-image: url('../images/SomeImage.png');
Try to copy webpage, css and example image in one folder temporarily. Then use only image name for url a see what happens. If it works, it will be the image path, if not something else.. possibly position.. is this complete css you are posting?
Initially, it looks like your code is fine.
So how do you know the image isn't loading? Look in your browser's developer tools to see if the image is loading, or returning an error, or not even being referenced. My guess here would be that it is loading, but not display because of something in your CSS.
if you are in /styles/style.css you need to add:
../ 2 levels back to get to the root folder.
So as Rokin answered :
background-image: url('../images/SomeImage.png');
is the way to do it.
To link your CSS within your index file use the following:
<link href="./style/style.css" rel='stylesheet' type='text/css'>
./ 1 level back within the index.html to reach the root folder.
In addition your problem might also be a file permission problem, I always face this issue when i download images from my email and use them directly.
If you are working locally on a mac:
- Right click on the selected image
- click on **get info**
- In sharing and permissions, make sure that the **everyone** has the **Read only** permission instead of **No access**
If you are working directly on a live server:
- login using FTP (with any ftp client such as File Zilla)
- Go to the selected image
- Right click and select file permissions
- set permissions to : **664**
Ok, so basically, I replaced the not-working /style/main.css with the copy of it (test.css - described in post comments) and now it works. Why is still the question, but the problem is kinda solved I guess.
Same with me, I guess images that used in css must be in the same folder as css file. I tried every possible solution while checking with the browser tool and the only thing that works is when I put the image and stylesheet in the same folder.
I am having the same problem. Working with Visual Studio Community.
I went inspect elements in browser and found that the file directory "automatically" (i did not set it this way) says that my image folder is nested inside my css folder. dont know why yet... so I then went and moved my image folder into my css folder seeing that this is what my browser showed me in the dev tools...
so maybe for some reason when working with css your images inside your image folder should be located in your css folder and not the complete Webpage Folder..it worked.
I am using wordpress as my cms and building a website. I use Graphene as my theme, as I modify the style.css through the administration menu (and verify the change via vi editor), I see that the change is there.
Now when I open my website, and right click Inspect element, I still see a old value of my "height parameter".
So I deleted all cookies, temp files from Chrome. And relaunched the website, still the old height values persist. What am I missing here ?
All sites I have referred to hint at clearing cookies, temp files.
Edit : I am running the wordpress server on my localhost.
Edit : added image
Open the page in incognito mode in Chrome (ctrl + shift + n ) just to make sure the page is loading the updated css file.
Chances are the CSS file you're editing is not the one your website is using.
Double check that the path to the CSS file you're expecting to change is the one you're changing in the backend.