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)}
Related
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.
When I try to upload an image file form my computer in my html file it doesn't show up in browser. But if I link a image file from the web it works. I've copied the file path correctly and made sure the extensions were correct. Is it something wrong with the file itself?Code In Question
In the picture you've attached you're placing an absolute filepath inside src while it should be relative, considering the file might be in the same folder as the HTML, but not in the same user folder/operating system etc.
To fix your issue I have an example below.
Folder layout:
website
index.html
images
myimage.jpg
Referencing:
How to reference to myimage.jpg relatively is by putting images/myimage.jpg inside the src attribute. The way you're doing it is website/images/myimage.jpg, but another user might not have the website in a folder called website but website2 for example.
I need a background image on my website. I've set it on my .CSS file, which is in a sub-folder. The background image only works if I put the .CSS file on the main website's folder.
I have those folders:
_src (html files source)
_src/_img (where all the images are stored)
_src/_css (where I've put the style.css)
In the head section of my HTML file I use the href equals to _src/_css/style.css
**In the body section on my .CSS file I set the background-image the url _src/_img/red_lines_bg_texture.jpg.
If I move the .CSS file to the Website's root the background image works.
Strangely enough, everything else works on the .CSS file, except - again - the background image.
Any help would be really appreciated.
URLs in CSS are always relative to the .css file unless otherwise specified, for instance, with a beginning slash as in "/imgdir/img.jpg"
Your background image can be set with an absolute url like this
background-image: url('/_src/_img/red_lines_bg_texture.jpg');
with a beginning slash to specify that you are giving a path relative to the root, rather than relative to the .css file.
I've got the solution.
I have the following directory structure relative to the root:
/_src
/_src/_css
/_src/_img.
CSS files only acccess folders RELATIVE TO ITS OWN LOCATION, so in order to access files in _img folder we should use the relative path, like this:
background-image:url("../_img/red_lines_bg_texture.jpg");
It finally works.
Thanks to everyone who tried to help.
Check it out:
External
Inline
I have successfully reproduced the issue.. on the external page (test.php linking to test.css) you will see an extremely simple html page. There is one div with one image in it. It has a css style applied to it but the background (which is a couple of dropshadows) is missing.
In the second set of pages (test2.php and test2.css), the ONLY difference is that the style properties have been moved inline, everything else is IDENTICAL, but the styling now works.
How come? I've seen this situation many times before but people always like to claim that "there is obviously some overriding styling somewhere that you just forgot about or aren't noticing" but in this case I have gone out of my way to show that there is no overriding styling.
Yet it's browser independent and consistent so I'm sure there is a simple answer.
Relative paths in external CSS files need to be relative to the CSS file, not the page.
Since you've put the url of the image inside a css, inside css folder, the url of the background image have to start with ../
In your inline, you use the full path starting with http://
In your external, you use a relative path starting with support/imag...
The reason the external doesn't work is because the path to the image is incorrect. Either use the full path (not recommended if it's on the same site as the page), or correct the relative path to make it relative to the CSS document, not to the actual page.
For example if your CSS is in a "css" folder like yours is, you usually need to start it's relative path with '../' to jump up one level before accessing your 'images' folder (or whatever the folder is).
You can
a) Put your test.css file in the same directory as your new.html file and replace <link rel="stylesheet" href="support/css/test.css"> with <link rel="stylesheet" href="test.css"> in your html file. Will work.
OR
b) Change the background image url from support/images/content_bgshadow.png to ../../support/images/content_bgshadow.png in your test.css
your just forget to change the path of your background image, it's now relative to your css not your html page
http://blueclick.ca/domains/blueclick.ca/new/support/css/support/images/content_bgshadow.png image doesn't exists you should put ../images/content_bgshadow.png in your stylesheet
You've got wrong url in your css file. Because it's in support/css folder you must set path relatively to this folder, so it should be ../images/content_bgshadow.png.
I had created one HTML page for my experiance. In this i had use the background image like c:\documents ans settings.....\leftline.png.
But i don't know how to add images from a common directory. (like background-image= ('./images/leftline.png'). how i can do like this?
The second line you have is a relative address, relative to the "thing" that is calling it.
So, say you have a webpage called "index.html" and it lives in
C:\My Documents\WebPages\My Page. You might also have C:\My Documents\WebPages\My Page\images\leftline.png
Now, rather than type in "C:\My Documents\WebPages\My Page\images\leftline.png" we can simply use "images\leftline.png" in our index.html page. Why? Well, check the locations:
C:\My Documents\WebPages\My Page\images\leftline.png
C:\My Documents\WebPages\My Page\index.html
RELATIVE to index.html, leftline is only one directory away, so you can address relatively.
You have to save the images inside the directory of your website and then you can acess these images using relative path.
If your page for example Default.htm lies inside the virtual directory WebSite1 then you can create a folder for images say 'Images' and can point to an image inside the 'Images' directory by using 'Images/image1.jpg'
If from your html file you have to traverse a folder up then you can use '../Images/image1.jpg'
You can also give an absolute path for the image like http://.....
Put the files in a directory that is in the same folder the html file is in. name the folder images.
You need to have this image inside your website.
And then the trick is to work out what URL to use (that's apparently your problem).
When you use an HTML image tag () in you page, then the browser sees the URL you specify. If that URL is relative (does not start with "http://" or a "/"), then it is sees as relative to the URL of the page. So usually you will need some "../" to go back to the root of the site and then back up again to the image.
A URL that is specified inside a .css file is relative to that css file.
If you use asp.net and want to specify the image-url in a server tag ( for instance), then you can use a "~" as first character to specify the "root of the site". This will work only if that URL is processed by the server as a property of some server control.