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.
Related
My wordpress is automatically storing css in cache file. I want to change the design, because the inspect tool of chrome showing me the cache file so i cannot change design directly in the original css file as i don't know the original file path.
how can I change the background image if i don't know the original css file path in wordpress.
You can try to add parameters to the CSS file url and change the value before uploading:
style.css?v=2
I've been teaching myself Wordpress theme development and have a custom made theme on my website(made by another dev a while ago). I want to be able to download the footer background image but I can't seem to find the correct url for it. In the Style.css file the footer background image is declared as
background: url(images/layout/bg-footer-boards.jpg)
But mysite.com/images/layout/bg-footer-boards.jpg, mysite.com/wp-content/images/layout/bg-footer-boards.jpg, and mysite.com/themes/mytheme/wp-content/images/layout/bg-footer-boards.jpg all give me 404's. I think this is just something with the file path that I'm missing but any help would be much appreciated!
Css url() is relative to the file rather than the webroot.
So images/layout/bg-footer-boards.jpg
refers to a folder called images/ located in the same folder as your .css file.
I have a rails app with many partials for one view, each partial is a section in the view (one paged website).
I have put all my assets in the correct places etc.
below is a screenshot of how the actual page should look (outside of rails) (header, then section one which you can see, and there are sections below etc).
However this is how it is showing when done in rails
No images are shown for some reason, nor any content.
When I do not include the style sheet, all the content (writing) shows fine. When I include the stylesheet, everything disappears, its all white. However there are content there because I am able to scroll up/down.
Below is a screenshot of the structure of my files
I basically have all my images inside the image folder, but there are subfolders inside the image folders.
so:
assets (folder)
images (folder)
section_1 (folder)
image.png (file)
in my css, because my css files are inside the stylesheets folder, I call my urls as follows:
background-image:url("../images/section_1/image.png");
As for my views, it is basically one view which renders out each section (partial).
Try background-image:url("section_1/image.png");
This works in my rails project. However, I'm using compass, so it might be different.
I know what the problem is. But I still have one more problem.
The solution.
When calling an image from anywhere, even if you have a sub directory like I have, you simply call the url as follows:
background-image:url("assets/header/header_bg.png")
So you basically leave out the images folder for some reason.
The problem I still have is a routing issue.
In my assets folder I have a folder named fonts.
Inside this folder I have a number of folders, with different fonts in each folder (.eof,.ttf.svg) the usual font files.
When I type in the exact url of where these files are stored I get a routing error.
I also have a file called fonts.css in my stylesheet folder.
In the url if i put localhost:3000/assets/fonts which is the folder of the fonts I get a routing error.
Is there anyway in the routes file can I route the application correctly?
Both for the images and for the fonts?
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
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?