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).
Related
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 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
I turned on URL rewriting on Drupal, and some URL image are broken.
For example :
local/tw/sites/all/themes/tw/images/1-p1.jpg become
local/tw/content/sites/all/themes/tw/images/1-p1.jpg
or
local/tw/sites/all/themes/tw/images/2-p1.jpg become
local/tw/node/sites/all/themes/tw/images/2-p1.jpg
Any ideas?
If you used relative path, and you're talking about contents within nodes, it's perfectly normal, since "node/" is interpreted like a directory.
You could fix this problem adding a "/" before image src, or using module like Path Filter that provides a simple file:relative/path/to/file syntax.
I'm loading a background-image with a url like this:
background-image: url(../../images/folder/imageName.png);
For certain pages, this works fine, but on others, it only works if I put a slash at the front like this:
background-image: url(/../../images/folder/imageName.png);
Its bizarre to me that this would work sometimes and not others. Also, my gut feeling is telling me that starting these urls with a slash is just plain wrong.
Does anyone have any insight on this?
Starting urls without a protocol (http://, etc) means it is relative to the current document. If the different pages are in different folders then the file that relative URL points to will change, which is probably your problem.
Starting a URL with a slash makes it relative to the entire domain/subdomain the page is on. I consider this a good practice so would encourage you to use it.
In your example however you are following it with ../../, which are "directory above" hints, which are ignored because you are already at the base of the domain.
I think I figured it out. My stylesheet is at an address like this:
http://localhost/rootDirectory//pageName/stylesheet.css
Note the two slashes between rootDirectory and pageName. It seems that when my images used the .. to go back directories, it treated the empty space between those slashes as a directory itself (while loading the stylesheet did not treat it as its own directory and had no affect on the path loaded).
So this is why for some stylesheets, ../../ seemd to work, and for others it didn't (as a matter of fact, ../../../ worked instead)
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.