I am having an issue getting my background-image to load as a live website (using github pages). When i load it locally I can get it to work by entering in the full directory. However when I then move it to Github the directory changes and so it no longer works. To summarise, when I use background-image url("images/picture.jpg"); it will not work at all. I have to type in background-image url("c/onedrive/webroot/images/picture.jpg"); so the whole file name. However that does not work when put onto Github. Any help would be much appreciated. (:
As others mentioned, it seems like a file path issue. When using relative paths like images/picture.jpg, make sure the target image is in the correct relative location as indicated. If your images folder is located at the project root, your background-image url had safer/better be /images/picture.jpg with the / at the beginning to denote the project root.
Update
Looking at your code on the repo, I fixed it by updating the relative path — background-image: url("../images/abstract.jpg");
Your folder structure looks like...
/
|
├── css/
├── images/
├── js/
├── objects/
└── video/
Since your stylesheet in css folder is pointing to a file in images folder, you'd need to use a correct relative path.
I have faced this problem before. If you're background-image doesn't work check if your path is correct you could also right click the image in the file browser open Properties
--> Security and copy the path from there. If this doesn't work copy the image address directly from the browser and paste it there.
Check your path is correct
body {
background-image: url("path_of_image_from_this_page.jpg");
}
Related
web page with my uploaded image here
I was trying to find the path my computer was using. I tried the basic code that
I learned in a program I'm currently in, but it didn't seem to work. The path is desktop/my-skillcrush-project/101-skillcrush-project-images/images-icons/html-icon.png
The program directed to download the zip file of the image on my computer and create a folder. With the root directory associated with the file including the image.Then to use this code. <img src="img/html-icon.png" alt="HTML icon"/ (closing tag disappears when I try to type it. Sorry, it's in my code.) and that was it. It seems too simple in my opinion. How should the files be saved so that it will show up??????
What is wrong
The problem is, in the src, you put a relative path. In HTML, a relative path is a path without a slash(/) at the beginning. So, HTML was expecting a folder called desktop in the 101-skillcrush-project-code folder which had all of the other folders and the image.
What you should do
You do not need to put the full(absolute) path for the image. You can put the relative path. That is, relative to where the index.html is located.
Solution
So, in the src of the image, you can put 101-skillcrush-project-images/image-icons/HTML Icon.png.
More Info
HTML File Paths on W3 Schools
HTML File Paths on GeeksforGeeks
It definitely is much easier if you make a clear structure for all of your html assets. That also makes it much easier to handle your paths. So for example start with a root folder - lets name it html, where you put all your html pages in. Inside html create a sub folder for e.g. for your images and css. Folder structure can look like that:
/html image path from html folder: <img src="img/html-icon.png">
|- img save "html-icon.png" here
|- css
|- js
|- fonts
|- etc
To access an image from another folder e.g. css folder, you first have to go one level up with .. and then, go into the img folder. e.g. <img src="../img/html-icon.png">
If you have your images somewhere outside your "web folder" the paths can get a pain. So just organize your assets - it is much more effective and much easier for you to find and work with it.
I'm trying to use a jpeg that I have saved into a file as a background to a html file using its file path as the url. I have the following but it doesn't work. Any thoughts?
<style>
body {
background-image:url('C:\Users\...\background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
ok, So giving relative path is very easy, only you need to understand the basic folder structure of your project, although I am not sure how you are keeping your files and folder structure so I will tell the ideal folder structure for front-end project (according to me), and will explain to you how you can use a relative path for assets,
let's keep the main HTML file in a folder named by your project, For example Peadar08 is the project name. so put an index.html file in your folder, and on the same level keep a folder for your assets, like this...
then in ASSETS folder create more folders for your respective assets(images, js, css etc), like this...
Now just see an example for images, and you can follow the same for other assets,
So you can use images in 2 ways,
As an IMAGE by img tag in your HTML, so keeping in mind the above stuture you can use images in your HTML like this.
<img src="assets/images/example.png" alt="altText"/>
So your image will render perfectly as assets and your HTML file is on the same level so just mention the path starting with the folder name.
now see another example if you need to use your image as a background image by CSS
so all you need to do is use of ../ to go one folder back, just because you are in css file and ../ this will take you one folder up, I.e in assets folder and then you can foloow the path. so in your CSS use this..
.ExampleClass {
background-image: url('../assets/images/example.png');
}
to move 2 folder up just use ../../ and so on.
Hope this will help you.
You don't need to specify location directly from the C:, but from the root directory in relation to where your index.html is.
You could just copy the link directly from where you found the image by right clicking the image in the browser and selecting 'Copy Image Address' and paste that in the image URL.
I have a problem in my html pages
when I use "root-relative" paths it isn't make the path correctly
instead of direct to the folder of index.html it direct to the father folder.
Example:
My index.html is: Websites/MySite/index.html
when I make a link in index.html to "/" it direct me to Websites/
what is the problem?
Root is the first folder that your work begins. Your site root is actually Websites/. So it acts correct. Maybe some hosts consider the folder that your html file is on it as root. If you want to have no problem with this, you should make all relative links work with your main root.
There is a php function that gives your current html file path. You can use it before your links. like:
<?php php_function ?>/mylink
The root path is a setting in the server config. If you want to reach something relative to your index.html than you would use ./ and ../
You can go back with ../ and stay in the directory with ./ where the file you are using is in.
For example if you want to reach the file
Websites/someFile.txt
from your index.html in
Websites/MySite/index.html
you would have to use the relative path
../someFile.txt
and if you wanted to use the file
Websites/MySite/subDirectory/some.css
from the same index.html you would write
./subDirectory/some.css
I hope that helps, if not feel free to ask, or make you question more precise.
And if you want to read more about relative url's you can visit the mozilla develop network ("Going back in the directory tree")
so evidently according to this Using relative URL in CSS file, what location is it relative to?, css that is loaded from the link tag references files in relation to the folder that the css file is in...
so here's my directory structure:
httpdocs/
css/
thecss.css
bg.png
so thecss.css contains the following entry
#guinea {background-image:url(bg.png)}
but the problem is...the image is not showing up even though it's in the exact same directory with the css....
on the other hand if I change it to this:
#guinea {background-image:url(http://localhost/css/bg.png)}
it would work!
using url(/css/bg.php) doesn't work either...
what am I doing wrong? why is my relative url include not working?
I would say it's best to separate your images and your styles.
So place your bg.png in an images folder and reference it as so...
#guinea {background-image:url(../images/bg.png)}
Like many developers I put my images in /images, css in /css, and js in /js. This way, no matter what the URL/directory structure, the site can simply reference /css/style.css or /js/jquery.
Problem is when I try opening the html from a directory, the paths are screwed up. It assumes / is C:/
I'd like to be able to preview html files in a directory before putting them into a CMS on the web, but don't know how. Can somehow be used to handle this with minimal hassle?
Using root-relative links is great but, as you see, can cause issues when working locally.
Ideally, you'd set up a local web server on your machine and preview that way rather than just using the file system.
By putting a slash in front of your path, you're making it an absolute path. You should use absolute paths as rarely as possible - instead, use relative paths.
Say you have a directory structure like this:
/website
/html
/css
style.css
test.html
script.js
/newcss
newstyle.css
If you're in test.html and you need to refer to style.css, the relative path would be css/style.css. If you need to refer to script.js, the relative path would be just script.js. If you need to refer to newstyle.css, the relative path would be ../newcss/newstyle.css (the .. means "go up one directory level").
This has the benefit of making your code portable - you could copy the website folder anywhere you wanted, on any system, even to your websever, and it would work. Both *nix and Windows systems obey these rules.
You could consider setting up a local server like XAMPP. That way, your files will be previewable on http://127.0.0.1 and your absolute paths can be made to work just like on the web. XAMPP comes with a default htdocs directory into which you would put your file structure.
It may take some time of setting it up and getting into it, though.