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.
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.
my file structure has 'my site' then 3 html pages, a CSS folder and an images folder. When using the background-image tag in CSS how do I access the images in the folder? i tried background-image: url(images/positive.png, but this did not work.]
Thanks
The background image is getting fetched from the CSS file.
Which means: If your CSS file is located in /Home/style.css and that your background is located at /Home/bg.png, you must specify the following:
background-image url("bg.png");
or:
background-image url("/Home/bg.png");
If the file is located at /bg.png and that your only a folder deep (for example, if your stylesheet is located at /Home/style.css), you can tell the stylesheet to climb up a folder, and then fetch the background, like so:
background-image url("../bg.png");
Hope this helps.
Give this is a try...
background-image: url("../images/your-image-name-here.png");
The "../" basically tells the code that it needs to come out of the CSS folder first, then go into the images folder. Without this step, it is looking for an images folder within the CSS folder.
Try this
background-image: url('../images/positive.png');
From what I can tell, everything is correct... I have an html file called index.html, and a css file that has the background image reference.
It works if I just load the page on a computer, but no matter what I try to put in the css as the background image for index.html, I can't get it to show anything.
I even tried just putting css in the actual index.html file.
<style type="text/css">
body {
background-image: url('/images/warning_small.png');
background-repeat:repeat;
}
</style>
Is there something I don't know about UIWebviews? Does it not like certain images or something?
There is simple trick to follow, it will definitely work. Follow the simple steps..
Create a folder in your project folder system.
Put all the html and resources files in the folder.
Remove unlinked entries from project.
Then add the folder by check the option shown in the image below
The above step should create a blue folder uncommon than other folder.
The blue folder is the trick, when you will run the app in your app folder you will be able to see an extra folder which you added at step 4. Now since all you resource files are in the folder the html file will look for the resources in the folder itself, and it should work.
You might need to tweak the path in the html, but this should work. It works for me always.
Cheers.
I have this:
body {
background-image: url("Images/Background.jpg");
}
But the url it generates is incorrect no matter what variation I use.
When I run my website, the url is localhost/MYSITE as it's plonking it on a local IIS server (not iisexpress).
The image is stored in a folder called Images on the root of the application.
if I inspect the element this is what I get:
background-image: url("Images/Background.jpg");
gives
url("http://localhost/MYSITE/Styles/Images/Background.jpg")
I don't know where the Styles comes from.
background-image: url("/Images/Background.jpg");
gives
url("/Images/Background.jpg")
Which is wrong since it needs to be MYSITE/Images.
background-image: url("~/Images/Background.jpg");
gives
url("http://localhost/MYSITE/Styles/~/Images/Background.jpg")
Styles is the location of the LESS file so I guess that is sorta why?
background-image: url("~/../Images/Background.jpg");
gives
url("http://localhost/MYSITE/Styles/Images/Background.jpg")
What is going on?! Why does it keep doing these weird things?
When I deploy to live it will no longer be IP/MYSITE it will be mysite.mydomain.com so I have to get the relative pathing correct.
If you give url of image in css it path start right from the folder where your css is so if your css file is inside Styles folder and you give background-image url as
url("/Images/Background.jpg");
localhost/MYSITE/Styles/Images/Background.jpg
because your folder structure is like this
Root
Styles
Images
so if you want to point some image in the Images folder from your css file in Styles folder you should write like this
url("../Images/Background.jpg");
It means go to the parent folder that is Root and then Images and then Background.jpg
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)}