My background image is not showing up when I open my GitHub pages. I've tried using both the actual pathway and Relative pathway but results are the same. This exact code works fine in VS Code in the live server so I do not know what the problem is, as I'm not getting any type of error message from GitHub. The picture is of the CSS file. Is this a code or GitHub problem??
enter image description here
Your root directory has index, img folder and css folder. Since you are in css folder you have to add .. to your path to go one level up ../img/background.jpg, this will do the work
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:
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.
My asp.net project has several .png (and a few .gif) files in the \Content\Images folder.
Two are not found; Chrome Dev Tool's Console tells me: "Failed to load resource: the server responded with a status of 404 (Not Found)"
...and sure enough, if I click the links that it shows (e.g., http://localhost/#System.Configuration.ConfigurationManager.AppSettings[%22ThisApp%22]/Content/Images/PlatypusorangeSprite.png) it takes me to GDT's Resources tab, and although the Images folder shows that file as being there, but there is a "broken image" representation of it.
The same thing happens with just one other image file (they are all in the same location, and the references to them, in CSS file declarations, is indeed pointing to where they exist, such as:
background:#E5EDFE url('/#System.Configuration.ConfigurationManager.AppSettings["ThisApp"]/Content/Images/PlatypusorangeSprite.png') repeat-x 0 -369px;
I can 2-click those files in the VS2010 IDE, and they open up and seem to look fine.
So why are they not being found at browsetime/seen as broken images?
UPDATE
Well, apparently it's got someting to do with my moving all the style declarations out of the cshtml file into a separate stylesheet/CSS file that is referenced in the page (I went back to the bad old way and it works fine - the pngs are found again (I even imagined that I heard them singing "Amazing Grace")). Since it is not a relative path to those pngs, why would it matter that the style info is in a .css file in the Content folder as opposed to being "inline"?
I hate it when you do the "right" thing and it makes things worse.
Some clients accidentally transform suffixes to big letters like .JPG or .PNG. If you call them by .jpg or .png, it will not match.
Render your template by compiling in Visual Studio, open your browser, look into your HTML and check the rendered path of your image:<image src="..." />. Alternatively, try to call the image direcly via ftp by url in browser like ftp://www.mysite/pics/ for example and click on link, that shows the image. Then you get the correct path in the url.
Also check if the suffix ist accidentally doubled like mypic.jpg.jpg.
Any case sensitivity discrepancies,perhaps?
I am trying to display an image from the /webroot/img/ folder using the following CSS syntax: .template-mainbg{background:#B8D9EA url('../img/bg_top.png') repeat-x left top;}
The image never loads and if I try http://site.com/img/bg_top.png it gives me a Missing Img controller error.
This very wierd since the default Cake icon loads perfectly. Both from CSS and direct link.
What could be the problem?
Thank you!
EDIT I solved this problem. Unfortunately I spent 2 hours to figure out that Dreamweaver didn't sync the image with the remote server. Thank you anyway for all your help!
paths are relative to the CSS document, so it depends where the CSS file is being served from.
In the above example, ../img/bg_top.png your CSS file would need to be in the site root I believe.
The image never loads and if I try http://site.com/img/bg_top.png it gives me a Missing Img controller error.
my understanding is that you can't access anything from "above" the webroot from a browser, hence the message.