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
Related
The css, js and image directories are in public directory. In turn, the public directory is inside of views (I don't know if it's a good practice to add public directory inside of views directory).
The css files and the js files(in the public directory) are working but only one of the images (that is, the logo at the navbar section) gets loaded on the browser whenever I start up the server, the remaining images are showing little icons in there respective positions. All the images are in the same directory and I linked all of them in the same manner. Why is it that only one is appearing on the browser?
I don't know if it's a good practice to add the public directory inside of views directory, but when I added both on same path with app.js, all the files in public stopped working. But I know I'm on the wrong track because of the following reasons:
No difference is observed whether
app.use(express.static("public"); is added to app.js``` (that is, the server file) or not. This means that that line of code is not working, still the cssandjs` files work in both cases.
Only one of the images is being displayed on the browser even if all are linked in the same way.
The word public appears in the source of each of the static files, omitting it stops all the static files from working.
App structure:
med,
webapp,
main,
views,
partials
footer.ejs
header.ejs
public
bootstrap
css
js
images
home.ejs
post.ejs
news.ejs
about.ejs
contact.ejs
app.js
package.json
I hope indentation will help here since I'm not allowed to post pics yet.
The images in home.ejs are
img src="../views/public/images/syringe-pill-capsule.jpg,
img src="../views/public/images/dna-1811955_1920.jpg",
img src="../views/public/images/lab-217043_1280.jpg".
the only one that is loading on the browser is the logo at the navbar section,in header.ejs. The link is img src="../public/images/wd.jpg"
The problem is that you are not passing the correct path to express.static. You need to change the root to the actual root, i.e.:
app.use(express.static("./path-to-views/public")
Then, you need to make sure to use the correct paths in your html, which will be as simple as:
src="/images/syringe-pill-capsule.jpg"
EDIT:
The root for express.static you were using is correct, i.e.
app.use(express.static("views")
But you need to adjust the paths in the images src attributes to the following absolute path:
src="/public/images/syringe-pill-capsule.jpg"
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
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)
I am using sass/compass and want to take advantage of compass's sprite feature. The project I am on is in a long-standing application where the images are all scattered around in the images folder.
For example, let's say I have two pages, page-a.html and page-b.html which have the following images on each page:
page-a.html:
/images/foo/bar.png
/images/elvis-presley.png
page-b.html
/images/foo/bar.png
/images/people/david-hasselhoff.png
The compass spriting tutorial suggests that all the images must be in the same directory. Given the above scenario, that is not possible because /images/foo/bar.png is used for both pages (but not necessarily every page of the site). So, in this case I would either have to:
duplicate the images/foo/bar.png image and place a copy into a folder specific to each page or
symlink the image in each page specific folder to a shared location where the file actually sits
Neither of these options are desirable and would easily prevent me from continuing this sprite optimization attempt.
What I need to know is whether it is possible for compass to create a sprite from several images not in the same folder.
You can try
#import "images/**/*.png";
#each $file in bar, elvis-presley, david-hasselhoff {
.sprite.#{$file} {
#include flags-sprite($file);
}
}
if you want the images to change every time the page reloads, then that's impossible with pure css because sass is compiled and not evaluated on every request.
What you are asking is not possible.
Are you planning on replacing the images you mentioned with css sprites? If so, every page would reference the compiled sprite image. The individual image files would no longer be used for any page, so it wouldn't matter where they are in the file system.
I am reviewing a site and i see a lot of different conventions on reviewing how images are reference in CSS on a asp.net-mvc site.
including:
Full path:
.ddTitle span.arrow {
background: url('/content/images/dd_arrow.gif') no-repeat 0 0;
}
Relative location compared to where the css is located:
#cluetip-waitimage {
background-image: url(jQueryUI/images/ui-anim_basic_16x16.gif);
}
Relative with ".."
#cluetip-waitimage {
background-image: url(../../jQueryUI/images/ui-anim_basic_16x16.gif);
}
In asp.net-mvc, with routing, etc . .is one correct and the others wrong or is this just preference or convention? Assume that this site might sit on a shared environment with other sites.
Your first option is perfectly fine if your application is always going to be in the root folder for the website (or at least your images are all going to be in the root folder). If you might have a different path in different situations (like having a shared site on development or testing), then this doesn't work.
The second and third options are basically the same thing. Which one is used is completely dependent upon where the images are located in relation to the CSS file. I personally believe that the second looks cleaner, so I try to put any images referenced by my CSS files in a folder structure relative to where the CSS is located. However, some people prefer to keep all images in one place (even mixing content images with site "chrome" images) and as such may need to use relative pathing with ../ in order to accomplish this.
I generally do it like this ...
background-image: url('/jQuery/images/ui-anim_basic_16x16.gif');
The opening / denotes the root folder, so all of your paths can be relative to the root of the program instead of the folder the page is running from. This adds a little bit of typing, but it removes a lot of the problems of parent hashing.
So if your images were like this ...
Solution
Controllers
Content
JQuery
images
Your path would be background-image: url('/content/jquery/images/ui-anim_basic_16x16.gif');
Doing it this way removes most of the implications of any sort of pathing. Because ASP.NET as a language understands the concept of relative urls, this should work on pretty much any situation unless the server you are hosting it on has something very awkwardly configured - and in that case, standards and practices won't get you too far.
Root-Relative Urls also make your application much more modular, from my experience. There may be more experienced programmers on here that can refute this with a reason, but from everything I have built, making all of my image urls root-relative has allowed me to drop my program into any folder and run it without complication.
I had a similar question. Since MVC allows the use of ~/ (in razor views for example) to denote the application root, I wondered if this should be done for image paths in my CSS files.
Of course, since CSS files are not processed on the server side, this won't work. However I think the right way is to use relative paths. This should be fine because the path to the CSS file (in a layout for example) can use ~/ and then the path from the CSS file to the image will be fixed; and it doesn't matter where the application root is... or if the layout or the main view are in a different Area.