Let's say if I link to a background img in a css file url(img/bg.png), and the css file is at http://example.com/test/style.css and the img file is at http://example.com/test/img/bg.png
However I browse the page at http://example.com/index.html and i like to the css file via <link rel='stylesheet' type='text/css' href='test/style.css' /> with the base set to <base href="http://example.com" />
Would the css file work?
This should work
index.html includes test/style.css , which is a valid link
AND
style.css has /test/ as root so img/bg.png is also valid link
NOTE: as a general convention it's good to include ./ when referring to current directory best choice is to refer images like ./test/bg.png from your css file
See this answer: Using relative URL in CSS file, what location is it relative to?
Related
I have a web page with the following folder structure:
MyWebpage
- css
- layout.css
- img
- wallpaper.jpg
- js
- index.html
I have the following line included in index.html
<link rel="stylesheet" type="text/css" href="css/layout.css">
Now, I want to use the image wallpaper.jpg as the background for the <body> element. How can I use relative referencing here? Should I locate the file relative to the CSS file, like this,
body {
background: url('../img/wallpaper.jpg');
}
or relative to the HTML file, like this?
body {
background: url('img/wallpaper.jpg');
}
It really depends on where you are writing your CSS.
If you are writing an inline style or using <head> <style> tags in the HTML file, then use a path relative to the HTML file (../ in this case), as you are telling browser to load the image from the HTML file.
And if you are writing the style in the CSS file, the style is relative to the CSS file destination (no ../ in this case), as you will load the CSS file from the HTML file and the CSS file will load all the required resources.
I have this strange problem that when I put the link of this .css file into the head of my html, the page works fine and gets the styles from that online .css file. But when I copy the entire content of that .css file and save it in my resources, it does not get the styles and does not work.
Does anybody has a solution for this strange behaviour?
this one works fine:
< link rel="stylesheet" type="text/css" href="https://www.example.com/global.css" >
this one no:
< link rel="stylesheet" type="text/css" href="resources/css/global.css" >
this is another css file which I included and works fine with the same path directory:
< link rel="stylesheet" href="resources/css/scrolling.css" type="text/css" >
you must be sure of the correct location of the css file
is the location is correct try to add / before the href
like this:
< link rel="stylesheet" type="text/css" href="/resources/css/global.css" >
same times if the location out of the folder you must be add two point like this
< link rel="stylesheet" type="text/css" href="../resources/css/global.css" >
i suggest you to be sure first if the location of css file is correct
I guess your structure is something like this:
- main-folder
- resources
- css
global.css
index.html
So if you wanna refrence global.css from index.html, it's better to write your link tag like this:
<link rel="stylesheet" type="text/css" href="./resources/css/global.css">
I mean by putting ./ at starting of href, you're telling the browser that *file is located in here (dot), after that, go to resources and finally in the css folder there is a global.css file *
Add a / in front of your path. When you have no slash at the beginning of the path, it inherits the path of the URL, and appends the path of the file. Adding the slash makes it "absolute"
You want it to be:
/resources/css/global.css
The path should be based from your root directory.
the problem is that I have a css file that is pointed from my baselayout.jsp file as following, when I am in index.php it applies the css but when I move to Profile/view.jsp it does not.
when I look at the source I noticed it is looking the css file in Profile/stylesheets/Base.css rather than myproject/stylesheets/Base.css, how to point to it in a way that works on all pages.
<link href="<s:url value="/stylesheets/mycss.css"/>" rel="stylesheet"
type="text/css" />
Its a breeze, just change the address to solid address, as following
http://www.example.com/myPreoject/stylesheets/Base.css
Is there a way to specify a standard path for stylesheets (analogous to the "include_path" directive in the php.ini file that specifies the location of PHP includes files) such that you only need to specify the unqualified stylesheet filename in the href value of the link element? Example, just be able to write:
<link rel="stylesheet" href="main.css" />
in all files, regardless of their location on the website, without having to worry about where the main.css file is located?
Thank you
Start your path with a / and it will be interpreted relative to the root of your website and will work on any file regardless of its location:
<link rel="stylesheet" href="/main.css" />
or if main.css is not in root:
<link rel="stylesheet" href="/some_folder/main.css" />
Use the HTML-base-tag:
<base href="http://your.domain/and/path/here/" />
Now, all your links will start at that position, even URL's inside a <LINK>.
The question is about using css stylesheets in your assets folder within the code igniter framework. If I want to reference a certain image for a css style, lets say for instance, background: url('../images/some_image.gif'). How should I reference this image, and what url should I provide. I'd like to do this in a way that I can put my image file in the image folder within assets.
There's no difference in regards to this because you're using Codeigniter, you can use /absolute/paths, full URLs, or probably the easiest way - relative urls.
The url to the image can just be relative to the <link>ed CSS file.
Example:
-assets
-css
screen.css
-images
bg.png
In your HTML:
<link rel="stylesheet" type="text/css" href="/assets/css/screen.css">
From screen.css:
background:url(../images/bg.png);