For example i have this line in my css file to load an image. It is a label icon in the sidebar.
background-image:url(../assets/images/icons/arrow_state_grey_expanded.png);
Since it is relative path, sometimes when i open a certain page, it cant find the image to load.
Example 1 (can load image)
http://localhost/portal_dev/subkeyword_view/add_subkeyword
Example 2 (cannot load image)
http://localhost/portal_dev/subkeyword_view/view_subkeyword/20/20
How to solve this problem beside move the image to root project folder? FYI, i am using codeigniter 2.0 in my project. Usually for php i will just called the full path of the image file.
UPDATE
Since CSS file URLs are reflective to the location of the CSS file, my css is loaded correctly, and the problem happen only when the current url contains parameter (see example 2), i think the problem is something to do with CodeIgniter not the css.
that's just a path thing, make sure the headers of your page reflect the exact location of the CSS file and that's it OR just declare the root + subfolder(s) for CSS files
considering your css folder is in the location
http://localhost/portal_dev/assets/css
specify the image url path as below
/portal_dev/assets/images/
In a CSS file URLs are reletive to the location of the CSS.
So if your CSS file is in /.../css and images re in /.../assets i.e. the image path is valid from the css then the images should load.
Are youy sure the CSS is loading. In case you are not using an absolute or root relative address for your CSS I would suggest using either of them.
Other wise you can add a base tag to your HTML file, this will be effective for all your href and src attributes on the page.
I ran into a similar problem with URLs like you are describing. I used the base tag to solve my problem
Related
I have actually done this before but I can not remember how to get this right. Does anyone know the proper setup or of a tutorial that explains how to set this up without a plugin?
Getting Adobe Edge Animations to work in WordPress (or any other CMS)
I just did this myself, and posted an article on Codepen about it; http://codepen.io/write/getting-adobe-edge-animations-to-work-in-wordpress
I've also opened up an issue over at Github; https://github.com/wittnl/Edge-Animate-Runtime/issues/3
The problem
When EA (Edge Animate) is looking for assets they use relative paths.
This becomes a problem when we're using WordPress, where we need to reference our theme folder, an absolute URL.
ERROR 1
The main file edge.x.x.x.js fails loading the right javascript file for the composition. Resulting in a 404, file not found.
ERROR 2
The composition specific javascript file that get's loaded by edge.x.x.x.js have relative paths to images etc. Resulting in that no images are loaded.
What we want
Have all our assets stored in our theme folder
Have all files load properly and enjoy our animations
The solution
1) Modify the main javascript file
Make your own version of the main javascript file, e.g; edge.5.0.1-edited.js
Check for comp.load and change it so that it loads from our theme folder correctly.
comp.load('/wp-content/themes/my-awesome-theme/assets/edge/' + projectPrefix + "/" + projectPrefix + "_edge.js");
2) Modify the "composition"-specific javascript file
Change the variables you need to change (e.g images) inside tools_edge.js so that it points to your theme folder.
var im='/wp-content/themes/my-awesome-theme/assets/edge/tools/images/'
I have a style sheet where I include background images.
background: url(../Images/myImage.png);
problem is, pages from different directories use this css!
My CSS files are in a CSS folder, images in an Image folder, and my html pages are in many different folders depending on their content and meaning to the website.
All my pages inherit this css as it is the MAIN theme.
The path used in the above example is a relative path. And obviously, this path only works for some of the pages. ALL i need is to link the images in the css from the ROOT folder. Therefore every path is correct no matter where the file is in the folder structure!
I have tried:
~/Images/myImage.png
./Images/myImage.png
/Images/myImage.png
Images/myImages.png
I don't think a root folder selector exists... but I hope it does :/
/Images/myImage.png
this has to be in root of your domain/subdomain
http://website.to/Images/myImage.png
and it will work
However, I think it would work like this, too
images
yourimage.png
styles
style.css
style.css:
body{
background: url(../images/yourimage.png);
}
click here for good explaination!
All you need to know about relative file paths:
Starting with "/" returns to the root directory and starts there
Starting with "../" moves one directory backward and starts there
Starting with "../../" moves two directories backward and starts there (and so on...)
To move forward, just start with the first subdirectory and keep moving forward
I use a relative path solution,
./../../../../../images/img.png
every ../ will take you one folder up towards the root. Hope this helps..
For example your directory is like this:
Desktop >
ProjectFolder >
index.html
css >
style.css
images >
img.png
You are at your style.css and you want to use img.png as a background-image, use this:
url("../images/img.png")
Works for me!
This problem that the "../" means step up (parent folder) link "../images/img.png" will not work because when you are using ajax like data passing to the web site from the server.
What you have to do is point the image location to root with "./" then the second folder (in this case the second folder is "images")
url("./images/img.png")
if you have folders like this
then you use url("./content/images/img.png"), remember your image will not visible in the editor window but when it passed to the browser using ajax it will display.
In the CSS all you have to do is put url(logical path to the image file)
When I put background-image: url() in to .css , browser doesnt put that image in that postition, but when i write that command in .aspx i get the image. Why it cant to call image from .css , i am making few themes so i have in every theme one .css and in each i want to have other header pict for example.
When you use pict/logo.jpg in your .css file, this is relative to the location of the .css file, not the file it's included in. If you put it in your .aspx, it's relative to the .aspx. You probably just need /pict/logo.jpg
See this previous question:
Using relative URL in CSS file, what location is it relative to?
I wanted to combine app_themes css files into one on the fly. I did so using Mads Cristensen
technique. But now all elements that has background image defined through css (see picture) don't display image.
.
I believe that is because css files are not relatively referenced anymore (../), but through axd file.
I'm trying to fix this by changing reference to image files without success. I already tried background: url("~/App_Themes/44/images/myimage.gif") and this works for pages that combined css. But the problem is that there are other pages in this project that don't use this css combining and now they lost reference to background images.
Any ideas?
I think that the ApplicationPath might be causing some confusion in this case...
Using a logical path (relative to the web-server's root) in the *.css file will work irrespective of whether it's rendered natively from the App_Themes folder or through an *.axd handler.
Take this example, for instance:
body
{
background-image:url('/WebSite1/App_Themes/Theme1/Image/Logo3.png');
}
This will resolve correctly whether it's rendered through an *.axd handler at the root (or at any depth below the root) and it will resolve if it's rendered at /WebSite1/App_Themes/Theme1/StyleSheet.css.
ASP.NET specific paths beginning with ~ (so-called root relative paths) have no force in *.css files and need to first be resolved to a a logical path using ResolveUrl().
(1) - http://www.west-wind.com/weblog/posts/132081.aspx
Normally when you have items like images or css in the theme folder they get nicely parsed and the url omits the App_Themes part. However I noticed for some background images, set in the css which comes from the same theme, that a request with the App_Themes/MyTheme/someimage.gif gets done. Resulting in an obvious 404 response.
How does this happen? And more important to me: what can I do to get rid of this as it hurts my performance.
Paths in CSS files are always relative to the CSS file. So if you set a background image from a CSS file (located in the theme folder) then the image URL is relative to the CSS file.
If you don't want that behaviour, then you can reference the image using "../../images/myImage.gif" or "/appName/images/myImage.gif" (assuming your image is in the "images" folder of your web app.
Haven't you answered your own question?
"...css in the theme folder"
"...I just specify a call as background image in css to myimage.gif"
if myimage.gif is not located in the same folder as your .css file, you'll need to specify its relative path as per M4N's response.