[index.jsp][1]
style.css
[issue][3]
[directory structure][4]
While The file is present in css directory all works fine but when it is kept in images folder it doesn't display any images. Please help
I think it's issue related your URL line which you have added. If your CSS file & image in same CSS folder then please make sure your CSS as per below.
background:url('OGSLogo.png') no-repeat;
If you have added image file in images folder and CSS file in CSS folder then please make sure your CSS as per below.
background:url('../images/OGSLogo.png') no-repeat;
Related
enter image description herefirst time posting here. I restructured all the files on my website since I wanted to experiment with how to organize files, and I ran into a few issues. When I launch the site HTML appears but the CSS stylesheet doesn't seem to want to attach. I also think the js sheet is also not attaching properly but can't test it till css shows up. I double-checked spelling as well as placed the index.html on the root folder but still nothing I'll post the code below and hopefully someone can help me out. I appreciate you guys.
When you link a CSS or JS file to an HTML file, you need to provide a relative path from the HTML file to the CSS or JS file. In this case, it looks like index.html is already in the Root directory, so you shouldn't include that in the CSS file paths. The relative path to the css files (the path from the directory where index.html is to where the css file is) would be /Css/index.css, and the same for your javascript files (/Scripts/index.js).
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.
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.
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)}