Check it out:
External
Inline
I have successfully reproduced the issue.. on the external page (test.php linking to test.css) you will see an extremely simple html page. There is one div with one image in it. It has a css style applied to it but the background (which is a couple of dropshadows) is missing.
In the second set of pages (test2.php and test2.css), the ONLY difference is that the style properties have been moved inline, everything else is IDENTICAL, but the styling now works.
How come? I've seen this situation many times before but people always like to claim that "there is obviously some overriding styling somewhere that you just forgot about or aren't noticing" but in this case I have gone out of my way to show that there is no overriding styling.
Yet it's browser independent and consistent so I'm sure there is a simple answer.
Relative paths in external CSS files need to be relative to the CSS file, not the page.
Since you've put the url of the image inside a css, inside css folder, the url of the background image have to start with ../
In your inline, you use the full path starting with http://
In your external, you use a relative path starting with support/imag...
The reason the external doesn't work is because the path to the image is incorrect. Either use the full path (not recommended if it's on the same site as the page), or correct the relative path to make it relative to the CSS document, not to the actual page.
For example if your CSS is in a "css" folder like yours is, you usually need to start it's relative path with '../' to jump up one level before accessing your 'images' folder (or whatever the folder is).
You can
a) Put your test.css file in the same directory as your new.html file and replace <link rel="stylesheet" href="support/css/test.css"> with <link rel="stylesheet" href="test.css"> in your html file. Will work.
OR
b) Change the background image url from support/images/content_bgshadow.png to ../../support/images/content_bgshadow.png in your test.css
your just forget to change the path of your background image, it's now relative to your css not your html page
http://blueclick.ca/domains/blueclick.ca/new/support/css/support/images/content_bgshadow.png image doesn't exists you should put ../images/content_bgshadow.png in your stylesheet
You've got wrong url in your css file. Because it's in support/css folder you must set path relatively to this folder, so it should be ../images/content_bgshadow.png.
Related
I'm new to coding. Currently working on a digital resume. I'd like to add a background image in CSS without using a url. The image is located in my project file.
I have tried to load the image in chrome and I took the url from that to css, but it didn't load. Any help? Thanks
Maybe your CSS file is not in the same directory as your image, you may need to use relative path URL, here I'll show an example:
Example directory arrangement
If your CSS file is inside the css folder, and your image is inside the img folder,
then you need to write your URL in your CSS file this way:
background-image: url("../img/your-background.png");
I'd say it be easiest if you used CSS to add the background image to your HTMl element. You can either use inline styles or create a css class in a separate file that you import in your HTML file.
https://www.w3schools.com/cssref/pr_background-image.asp
An example for this would be:
HTML:
CSS:
Make sure you use the relative path to your image file. Otherwise it will not load.
Otherwise you could use the HTML image tag:
https://www.w3schools.com/tags/tag_img.asp
I need a background image on my website. I've set it on my .CSS file, which is in a sub-folder. The background image only works if I put the .CSS file on the main website's folder.
I have those folders:
_src (html files source)
_src/_img (where all the images are stored)
_src/_css (where I've put the style.css)
In the head section of my HTML file I use the href equals to _src/_css/style.css
**In the body section on my .CSS file I set the background-image the url _src/_img/red_lines_bg_texture.jpg.
If I move the .CSS file to the Website's root the background image works.
Strangely enough, everything else works on the .CSS file, except - again - the background image.
Any help would be really appreciated.
URLs in CSS are always relative to the .css file unless otherwise specified, for instance, with a beginning slash as in "/imgdir/img.jpg"
Your background image can be set with an absolute url like this
background-image: url('/_src/_img/red_lines_bg_texture.jpg');
with a beginning slash to specify that you are giving a path relative to the root, rather than relative to the .css file.
I've got the solution.
I have the following directory structure relative to the root:
/_src
/_src/_css
/_src/_img.
CSS files only acccess folders RELATIVE TO ITS OWN LOCATION, so in order to access files in _img folder we should use the relative path, like this:
background-image:url("../_img/red_lines_bg_texture.jpg");
It finally works.
Thanks to everyone who tried to help.
so evidently according to this Using relative URL in CSS file, what location is it relative to?, css that is loaded from the link tag references files in relation to the folder that the css file is in...
so here's my directory structure:
httpdocs/
css/
thecss.css
bg.png
so thecss.css contains the following entry
#guinea {background-image:url(bg.png)}
but the problem is...the image is not showing up even though it's in the exact same directory with the css....
on the other hand if I change it to this:
#guinea {background-image:url(http://localhost/css/bg.png)}
it would work!
using url(/css/bg.php) doesn't work either...
what am I doing wrong? why is my relative url include not working?
I would say it's best to separate your images and your styles.
So place your bg.png in an images folder and reference it as so...
#guinea {background-image:url(../images/bg.png)}
I had to split up a long css file. I put the smaller css files within a styles directory.
Now I have to update the the urls to go up one level with the ../ notation.
Is there anyway to specify the base URL from which to load assets like with the base tag in HTML, but with CSS?
No, there isn't. I suggest to place the CSS images in at least the same level as the CSS file so that you don't need to go backwards in the path. E.g. /css folder for CSS files and /css/images folder for CSS images. Then you can consistently use url('images/name.ext') for CSS images. This way you can place the root /css folder practically everywhere without fiddling with the image URL's.
As an alternative, you could dynamically add a class to your body tag, and use that in selectors to override css URLs depending on which directory your file is served from.
An alternative way to set the base directory in the CSS (which seems to be impossible) is to set the base directory of the HTML document with the <base> tag. This tag is not well known in the community but I found a nice tutorial in the web:
https://webdesign.tutsplus.com/articles/quick-tip-set-relative-urls-with-the-base-tag--cms-21399
It seems to be totally a good solution.
I'm currently working on updating a "legacy" website to xhtml/css, so that I can go ahead and proceed on a re-design. All of the pages have the header included via PHP. The issue is is that if I reference the style sheet from the header as "style.css" it looks in the current directory for the style sheet where of course there is no style sheet. Do I need to use an absolute path, or is there a better way to do this?
The line below should work in any HTML/PHP file in any directory, included/required or not, as long as the directory "assets" is in your home directory. I think i'm right in saying this is true for all "href" attributes (i.e. in anchors).
<link href="/assets/css/style.css" rel="stylesheet" type="text/css" />
If you're including a CSS file with a PHP inluclude, you must know the relative path from every file in which you are running the include function - no absolute URLs are allowed.
The path to the CSS file is relative to the URL which you used to request the main PHP page (the one in browser address bar), not to the local disk file system path where the PHP page is located in the server machine. CSS files are namely loaded by the webbrowser, not by webserver.
So to figure the relative style sheet path which you'd like to use in <link href> in the HTML head, you need to know the absolute URL of both the PHP page and the CSS file so that you can extract the relative CSS path from it.