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.
Related
Okay so let's assume, for simplicity's sake that my folder structure looks like this:
project
- index.html
- css
- style.css
- scss
- style.scss
- img
- image.jpg
I want to use my image.jpg as a background for a div. I am working from style.scss and then monitoring the scss to css in style.css. If I use the path ../../img/image.jpg it will be displayed as correct in style.scss, but since I am monitoring this to style.css, the image will not be displayed because the path to the image from style.css is ../img/image.jpg. This goes both ways, If I use the path ../img/image.jpg the image should not be displayed because the path is incorrect for style.scss. How can I make this work?
I'd personnally set the images url to fit the style.css needs.
In my point of view, style.scss is here only to provide more flexibility during the coding of your design. This way, i never use .scss files inside my HTML.
Taking the in mind that i always compile the .scss into .css, that makes no sense to me to set the path from the .scss file.
By the way, i know there are tools allowing to auto-compile .scss files before returning them compile from the server, but i'm not pretty fan of this solution, because more than requesting a file in HTTP GET, you'll need your server to compile code before returning it, so it'll obviously take a bit more time...
One of the possible solutions for that to use absolute path to your images, I mean, like:
/img/image.jpg
therefore you will still have autocomplete in IDE
and css will be transpiled correctly
I have many html files, all named index.html but being in different subdirectories.
These files are created by a software. After these files being created, I want to add a Stylesheet to all of them!
If i use SEARCH:"<head>" and REPLACE:"<head><link rel='stylesheet' href='/style.css'>" it wouldnt work because the files would need relative paths.
Any idea how I could achieve my goal? While Iframes are oldschool they do not use the CSS of the main page i assume.
Other ideas?
You could use an absolute path to your CSS-file. Then it doesn't matter that they're in different paths:
<link href="/styles/site.css" ...
Now every file will look up the styles-folder in the root, and the file site.css in that folder
Just use the absolute path as you mentioned.
And DO NOT open your html files directly in the
file://D:/path/to/your/file/index.html
because the root path '/' means D:/
You should setup a http server to host your pages and open them by visiting like
http://localhost/url/to/your/file/index.html
the root path '/' means
http://localhost/
Or upload them to a server.
In this way the absolute path of your css will work correctly.
Forget the relative paths.
Can anyone please help.
I am refreshing my knowledge of HTML and CSS (its been 4 years since I worked with these languages) and I am having trouble referencing images in a folder structure that I have. The enclosed image shows the folder structure that I have for my project.
What I want to do is from my index.css file in my CSS folder, use the following line of code to access an image, Logo 1.png, from my Images folder to use as a background.
body
{
background-color: #FFFEF0;
background-image: url(./Images/Logo 1.png);
}
However, this does not seem to work, I see no image. I have also tried ../Images/Logo 1.png, but again this doesn't work either.
From my index.html I can get an image to display from the Images folder by using ./Images/Logo 1.png (note ../ vs ./)
Am I going about this the right way or not? I did some digging on Google about referencing relative paths but there werent any great examples up.
Can anyone please tell me where I am going wrong with this?
If your URL includes spaces, you should really enclose the reference in quotes, also replace the space character with %20:
background-image: url('../Images/Logo%201.png');
Add 2 dots, to go up one level in folders, so if you have your images in one folder and then your css in another you'd need to go up one level and then in to your images folder eg:
background-image: url(../Images/Logo 1.png);
You might also get issues with using a space in the file name, try using an underscore instead :-)
If you use image in css, you need put source file related to css file, so if your structure is like:
index.html
css
style.css
images
background.jpg
your css should be like:
background: url(../images/background.jpg);
Also dont use spaces in file name.
use the .. to go up one level in the directory
quote the url (optional, however advisable for best crossbrowser support)
don't use spaces, try underscores instead
good practice for simplifying things: folders and files lowercase, that way you don't have to remember if the case
background-image: url("../images/logo_1.png");
Two issues, first the stuff with the url should be in quotes like this
background-image: url("../Image/Logo 1.png");
Second a single dot referrers to the current directory that the css file is located in, so when you used "./Image/Logo 1.png" it tried to find a folder called image within the CSS folder. You need to use double dots ("..") in order to go up a level within the file directory. That should fix it, assuming that your html correctly includes the css file.
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.
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)}