Is it possible to enter a base tag/declaration in CSS, something like in HTML?
I need one because I use mod_rewrite and the url looks like that: domain.com/path/to/something/
So my background images aren't loading right (just index/home-page). All I can think of is to add the whole domain (which I have to change every time I update CSS on my webspace) but that I won't like to do.
If you put the CSS in a style sheet, the paths are relative to the location of the style sheet file, not relative to the page.
For example, if you have a style sheet at /css/global.css and an image at /images/logo.gif, you would reference the style sheet from the page like this:
<link rel="stylesheet" type="text/css" href="/css/global.css" />
(Note that you use a path relative to the root, so that it doesn't matter what URL was used to request the page.)
In the style sheet you would use the image like this:
#Logo { background: url(../images/logo.gif); }
Set up a structure something like:
/index.html
/img
/image1.png
/image2.png
/css
/styles.css
Move all your CSS rules into the external styles.css stylesheet.
Now, within the CSS, your image references are relative to the location of the stylesheet - so you can use relative URLs like background-image: url(../img/image1.png);
Finally, make sure that in your HTML code, you use an absolute URL to link your stylesheet - like:
<link type="text/css" rel="stylesheet" href="/css/styles.css" />
Using relative URLs within your CSS means you're free to move your stylesheets and background images into different folders - or even to a different domain or server - whilst the absolute URL /css/styles.css in your HTML LINK tag won't be affected by mod_rewrite or anything else that affects your pages' apparent location on your server.
If you can, you should anchor your URL's so they become root relative:
For instance, change:
background-image: url(images/image.png);
To this:
background-image: url(/images/image.png);
Secondly, even if your CSS was setup as a pure relative path, it is relative to the CSS file not the page (unless you are embedding the CSS in the page).
The CSS is in a file and looks for example like this:
.ui-widget-content { background: black url(images/content.png) repeat-x; }
Structure:
domain.com/folderone/
domain.com/folderone/style/
domain.com/folderone/style/css/
domain.com/folderone/style/css/general.css
And a look on Firebug says that it's trying to load from:
http://domain.com/style/css/images/content.png
Related
I have a hard time adding picture through background-image property in css
my file structure looks like this:
www
styles
stylesheet.css
images
background.jpg
I tried:
background-image: url("/images/background.jpg");
background-image: url("images/background.jpg");
background-image: url("background.jpg");
background-image: url("../images/background.jpg");
background-image: url("/../images/background.jpg");
background-image: url("../../images/background.jpg");
I also tried all of these options without quotes. I copy-pasted image's name and my folders are as I stated: main folder in which I have styles folder(inside is stylesheet.css) and images folder (inside is background.jpg). The image did not load in chrome or firefox. What path declaration should I use to make the image show?
www
index.html
styles
stylesheet.css
images
background.jpg
that the directory, here inside index.html / index.php (where u want show)
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css" />
remember for href link
and then at stylesheet.css
background-image: url("../images/background.jpg");
background-image: url("../images/background.jpg");
This is correct. If it is not working, perhaps the path name is not the problem.
Are you running this from a server?
Or, are you running this from your computer?
Try changing the situation and see if anything changes.
I'd put my money on spelling mistake, though. Best to triple check it.
Don't know what's going on, but for some reason my background image is not showing when linked in external style sheet.
Example1: (working)
<html>
<head>
...
</head>
<body style="background: url(images/image.jpg);">
...
</body>
</html>
Example2: (non-working - external css file)
body {
background: url(images/image.jpg);
}
The image is displays when/if I use the first example, but no image is displayed when I use the second one.
Any suggestions? Thank you in advanced...
The directory your external CSS file is stored in may be different from the directory of the page you are putting the inline styles on. You may need to start your path with a slash.
url(/images/image.jpg)
or perhaps go back a directory like
url(../images/image.jpg)
I've found instruction on where to place this image
body { background-image: url(example1.jpg); }
But I can;t figure out how to format or get the "url"( ) it's looking for. Do I need to save it in a different place, or format my image differently?
You could use this CSS:
body {
background: transparent url(http://mydomain/content/image.jpg) no-repeat 0 0;
}
or of course:
body {
background-image: url(content/content/image.jpg);
}
Your URL can be absolute, like in the first example – or relative, like in the second. You have to notice, that when placing a relative path, it is relative to your stylesheet definition, not your HTML-Document. Example with directories:
- webroot
index.html
img/image.jpg
css/main.css
When you put the definition from above into the index.html the URL would be:
url(img/image.jpg)
but when you place it inside the main.css it would be
url(../img/image/jpg)
One final thought on this: If you have blanks/whitespaces in your path, you have to wrap the url in single or double quotes like:
url('image/my image.jpg')
You can use any standard url such as
http://example.com/xx.jpg
or from your directory
/images/xx.jpg
Is this what you are looking for.
You put the url in relative to the stylesheet, NOT the site root. For instance if you have this structure:
root
- images/
- image.gif
- css/
- styles.css
- index.html
The your url path would be url('../images/image.gif');
On an unrelated note (and just because I found this out the other day), if you're using a .htc file (like PIE.htc for IE rounded corners for example) then the behavior url needs to be relative to the root and not the stylesheet.
I am having a problem with image paths in my css. My directory structure is below with folders in bold.
mp.master has a reference in it for menu.css, both of my testpages are using mp as its master page. testpage2.aspx (in the root folder) looks correct, testpage1.aspx (inside of a sub folder) is not able to find images (ie navBG.png) specified in menu.css. If I move testpage1.aspx to the root it works fine.
Other styling in menu.css is applied to testpage1.aspx, just not images.
WebSiteFolder
css
menu.css
img
navBG.png
SubDirectory
testpage1.aspx
mp.master
testpage2.aspx
In menu.css I have the following:
.no-cssgradients nav, .no-js nav { padding-bottom:4px; border:none; background:url(../img/navBG.png) repeat-x 0 0; }
What am I doing here? I have tried to state the absolute path with ~/, ./, ../ but nothing seems to work.
You should try /img/navBG.png. Basically this means that you are using an absolute path in css. Caution: absolute path in css means that the image uri is in the following pattern [host name] + [url you have specified in css], so if your site is located in virtual folder the uri won't be resolved correctly.
have you tried /img/navBG.png?
You're going to want to use absolute pathing rather than relative. /img/navBG.png is what you're looking for.
Drag the CSS file from Solution Explorer to the head section of the master page in code view :)
Your CSS rule and path are correct.
I found my answer here How to get JqueryUI to work with ASP.Net Master Pages and multiple paths?. I was making a site to try out some css3/jquery stuff and my problem was not in referencing my css, but in referencing the jquery library.
this.Page.ResolveURL is your friend here:
<script type="text/javascript" src='<%= this.Page.ResolveUrl("~/resources/js/jQuery.js")%>'>
I can't figure out why the image is not resolving inside the div id="header_container"
everything looks ok, the image is on the server,,, what's the issue here?
http://winteradagency.com/mrw/index.php
any ideas?
thanks
When you make a CSS url() directive a relative path, it is relative to the CSS file, not the page the CSS is on. In your case, the header_container directive is:
background-image: url(images/logo.jpg);
Because your CSS file is in /mrw/styles/styles.css, the path that the image is being looked for at is /mrw/styles/images/logo.jpg. You need to adjust your CSS directive accordingly. One of the following should work:
background-image: url(/mrw/images/logo.jpg);
or
background-image: url(../images/logo.jpg);
Background image URL's in a CSS file are relative to the URL of the CSS file itself, not to the URL of the parent HTML page which included the CSS file.
So, to fix your particular problem, change images/logo.jpg to ../images/logo.jpg, otherwise it is trying to lookup the image in styles/images/logo.jpg