I have a strange problem with paths, this one works (on Windows):
<div style="background:url('folder1/image.gif')...
But this one won't work (no image shows up):
<div style="background:url('/folder1/image.gif')...
Still this page says exactly the opposite (not the first but the second version should work): Background not working for a div
Anybody knowing what the reason might be?
The first url is relative to the folder in server what your HTML is used to render the page.
Example, if you get:
www.mywebsite.com/index.html
it will look into: (example 2)
www.mywebsite.com/folder1/image.gif
but if you are in another folder like:
www.mywebsite.com/subfolder/index.html
It will look in:
www.mywebsite.com/subfolder/folder1/image.gif
If you use a '/' in the beggin, the path isn't more relative, it always look in the root website, like exemple 2 no matter where your html is located.
Depends on where your image and html file are located.
'folder1/image.gif' will search for a folder1 that is located in the same path as your html file (relative path).
'/folder1/image.gif' will search for a folder1 starting from the base location of your server (absolute path).
The first is a relative path, the second is an absolute path
Relative paths show the file path from the calling context. So if your html file is /source/website/test.html, a relative path of css/test.css will point to a file in /source/website/css/test.css
Absolute paths show relate to the whole path, so /css/test.css tries to find a file at the location /css/test.css
Most modern browsers allow you to inspect elements on a web page. On chrome (or other modern browser) open the console and look for errors, if the image url is wrong, the console will indicate it as an error, moreover you will get the broken-image icon if you have specified the wrong url
Related
Good day.
My structure is like this:
/
index.html
style/
main.css
images/
test/
test.html
/style/main.css says something like this:
body {
background-image: url('/images/SomeImage.png');
background-color: #000;
}
/index.html has a link to this CSS file, but, as the title says, no image will load. But it's connected though, cause the background is actually black, so the rest of the style (but images) does work.
Also, if I write the same style internally into /index.html the background will load.
Also, I created /test/test.html which says nothing but
<img src="/images/SomeImage.png" />
and the image is displayed on that page.
So, obviously, for some reason my /style/main.css can't reach files, that any other file from any other location reaches. Why does this happen? There's clearly nothing wrong with the syntax. I'm lost.
add ../ to the beginning of /images so it read ../images/imagename.jpg
Here's what your code should be:
body {
background-image: url('../images/SomeImage.png');
background-color: #000;
}
Because your image is in another folder (thats a level up than your style sheet), you need to start with "../" for a level up folder in hierarchy relative to the style sheet. So you need a relative URL:
background-image: url('../images/SomeImage.png');
Try to copy webpage, css and example image in one folder temporarily. Then use only image name for url a see what happens. If it works, it will be the image path, if not something else.. possibly position.. is this complete css you are posting?
Initially, it looks like your code is fine.
So how do you know the image isn't loading? Look in your browser's developer tools to see if the image is loading, or returning an error, or not even being referenced. My guess here would be that it is loading, but not display because of something in your CSS.
if you are in /styles/style.css you need to add:
../ 2 levels back to get to the root folder.
So as Rokin answered :
background-image: url('../images/SomeImage.png');
is the way to do it.
To link your CSS within your index file use the following:
<link href="./style/style.css" rel='stylesheet' type='text/css'>
./ 1 level back within the index.html to reach the root folder.
In addition your problem might also be a file permission problem, I always face this issue when i download images from my email and use them directly.
If you are working locally on a mac:
- Right click on the selected image
- click on **get info**
- In sharing and permissions, make sure that the **everyone** has the **Read only** permission instead of **No access**
If you are working directly on a live server:
- login using FTP (with any ftp client such as File Zilla)
- Go to the selected image
- Right click and select file permissions
- set permissions to : **664**
Ok, so basically, I replaced the not-working /style/main.css with the copy of it (test.css - described in post comments) and now it works. Why is still the question, but the problem is kinda solved I guess.
Same with me, I guess images that used in css must be in the same folder as css file. I tried every possible solution while checking with the browser tool and the only thing that works is when I put the image and stylesheet in the same folder.
I am having the same problem. Working with Visual Studio Community.
I went inspect elements in browser and found that the file directory "automatically" (i did not set it this way) says that my image folder is nested inside my css folder. dont know why yet... so I then went and moved my image folder into my css folder seeing that this is what my browser showed me in the dev tools...
so maybe for some reason when working with css your images inside your image folder should be located in your css folder and not the complete Webpage Folder..it worked.
This is my coding, I want to change my background-image, but it seems not working.
I have tried this coding, it is not working, i don't know what's wrong.
<header style="background-image:url('C:/Documents and Settings/Administrator/desktop/images/navigationBackground.jpg')"></header>
Because you are using full path of file instead of URL.
Change url to http://localhost/images/navigationBackground.jpg, or better without server name, just relative url images/navigationBackground.jpg (and move image to web accessable location instead of desktop)
you have to specify the url of the image, instead of the filesystem path
You should restructure your webpage path. You can put all your resources in a single folder and just specify the url of your image, instead of using filesystem path.
I've done my searching and the topics haven't been of help.
I'm trying to have the background image of my header repeat across the X axis of the header div.
When I make CSS with a long URL such as
background-image:url('http://site.com/images/logo.png'); everything works fine
When I try to shorten the CSS to something such as ~/images/ or even having the CSS and site file already in the root folder and using /images/ I get nothing
background-image:url('~/images/logo.png')
background-image:url('/images/logo.png')
This is possibly because you're not shortening your URLs appropriately.
Assuming an absolute path of:
url('www.example.com/images/imageName.png');
A root-relative URL would be:
url('/images/imageName.png');
And a relative path (assuming your CSS file is in www.example.com/css/cssStylesheet.css) would be:
url('../images/imageName.png'); /* parent directory, then the images directory */
The ~ prefixed url format is unknown to me, though I suspect it's an ASP, or .NET, form? Though I'm unable to advise on that.
Questions that might be of use to you:
How do I turn a relative URL into a full URL?
Using relative URL in CSS file, what location is it relative to?
Absolute urls, relative urls, and...?
A URL containing "~" is something that's specific to ASP.NET, it's processed server-side and transformed into a "proper" URL such as http://mysite/my_virtual_directory/images/logo.png. Web Browsers don't have any way to do this as they don't know to what "~" refers.
You need to ensure that the URLs you use in your CSS file are "understandable" by the browser, so either have them "fully qualified" (http://mysite/my_virtual_directory/images/logo.png) or starting from the "beginning" (/my_virtual_directory/images/logo.png).
I'm working on an HTML5 mobile app and I initially have the background of a DIV item set through the CSS as follows:
background-image: url('images/ClanSpider.png');
In my app, I have a method that changes the background DIV based on a selection made in a dropdown list from a previous method using jQuery:
function ResetMyHonor()
{
ClanImage = 'images/Clan' + MyClanName + '.png';
$("#MyClanName").html(MyClanName);
$("#MyHonorBox").css('backgroundImage', 'url(' + ClanImage + ')');
}
All of this works fine when I'm on the root of my page. However, I have some links within the app using hash tags to navigate the page (such as #MyHonor). When I've navigated to one of these tags and call my reset function above, the image breaks. When I pull up the Chrome Inspector to look at the DIV tag, it says that the image it is trying to load is "images/MyHonor/ClanSpider.png" which doesn't exist.
I know the CSS url will generate links in reference to its location within the application, but it doesn't matter where I move the CSS files in the application.
Is there a way for me to rewrite what comes out of the url processing or an alternate way of specifying the background image of the DIV without doing any kind of server side processing? Ideally this app will run through the manifest cache feature of HTML5, so I won't have access to any server based languages.
Try putting a leading slash on those paths to represent the root.
ie use:
url('/images/ClanSpider.png')
instead of
url('images/ClanSpider.png')
From reading through your comments on the other answers I think you're creating a problem for yourself that doesn't really exist. If url('/images/ClanSpider.png') is going to work when you upload to the web server then the trick is to make it work the same way when working locally. By far the easiest way to do this, especially if your focus is an offline app which has little in the way of server side requirements (which I'm assuming is true, as you mentioned file:/// URIs), is to run a local web server.
Python ships with a module SimpleHTTPServer, if you have Python installed then starting it is as simple as going to your L5RHonor project directory in a command prompt and issuing the following command:
python -m SimpleHTTPServer
Then instead of accessing your files with URIs like this:
file:///H:/Projects/L5RHonor/images/ClanSpider.png
You will access them like this:
http://localhost:8000/images/ClanSpider.png
All your root relative file paths will now work correctly, as an added bonus the offline caching will work correctly in Chrome and you'll be able to see from the log in the command prompt window that it is requesting and caching the correct files according to your manifest.
The simplest solution is obviously adding a slash to the URL to make it absolute. That will work fine, but it makes it impossible to move the application into a sub-directory, or to move static resources to a different server. If that is a problem, there are various alternative ways.
If the number of possible background images is finite, you could define every one in a class of its own:
.bgSpider { background-image: url('images/ClanSpider.png'); }
.bgFalcon { background-image: url('images/ClanFalcon.png'); }
...
and then do an .addClass() to set the correct image.
Other than that, as far as I know, there is no way to specify a path relative to the style sheet (rather than the current document) when setting a background image path in Javascript. You would have to work with absolute paths, or define a root path in JavaScript, and use that:
// in the script head
imageRoot = "http://www.example.com/mysite/images";
// later....
$("#MyHonorBox").css('backgroundImage', 'url(' + imageRoot + ClanImage + ')');
The location of the CSS file is irrelevant, you are modifying the .style property of an HTML element. This is the same as using the style attribute.
As this is CSS embedded in the document, all URIs are relative to the document.
You probably want to start the URL with a /, or if you really want the absolute location specified in your question: http://
Try adding a / at the start of the URL?
For example I have site http://localhost/site
In IIS I set that 404 error causes redirection to default.aspx
If I type something like http://localhost/site/nodirectory , (there are no such folder) all works perfectly.
But if I only add slah at end http://localhost/site/nodirectory/, page can't display css and images.
Images and css are located in their own folder. I tried different paths: "gfx/logo.gif", "/gfx/logo.gif"
Does anyone have some ideas about that?
If your css and images are relative paths, say ResolveClientUrl("~/gfx/logo.gif") this renders to the client as src="gfx/logo.gif", which the browser with a slash thinks is /nodirectory/gfx/logo.gif instead of just /gfx/logo.gif.
To resolve this, don't use .ResolveClientUrl(), use .ResolveUrl(), this will make the src render src="/gfx/logo.gif" The beginning / makes it definitive, it's that path from the root of the domain.
You'll see this same hebavior if you're doing paths that start with ../ or gfx/ yourself...make them relative to the application base so there's no chance of confusion.
There are a couple of options...
1)
In your HTML page, make the path to CSS and scripts relative...
"/scripts/myscript.js"
Where the scripts folder is the first folder after the root folder
2)
You can add the base tag to your page, which means ALL page resources will be treated as relative to the root location you specify...
<base href="http://www.mysite.com">
More info about these two options.
If you can, option 1 is perhaps a bit cleaner. You know explicitly the resources that you are affecting. Using the base tag will affect ALL relative paths on your page. Images, Links, Scripts, CSS et al. The second option works best if you developed your 404 page assuming it would be in the root folder, but it could actually be referenced from any non-existent directory. You just put your root address in the base tag and it will all behave exactly as you expect.
With either option, the images can be relative to the location of your CSS file.