I am forever plagued by trying to reference an image from across my application.
The directory structure is:
src/app/assets/images/splashImage.png
In this trivial case, I'm trying to reference it from:
src/app/app.component.html
The first line of the html:
<div class="splashContainer">
The css file:
.splashContainer {
background: url("../../assets/images/splashImage.png") no-repeat center center fixed;
The build diagnostic says it can't find the file at --> the URL path from above.
My rule that obviously is wrong is to count up starting at the folder housing the html. app is 1 and src is 2, which gets me above the assets folder. Thus the two ../ parts.
What am I doing wrong?
Thanks in advance.
Yogi
Try
background: url(assets/images/splashImage.png) no-repeat center center fixed;
Do not use paths like ../dir or ../../dir since relative paths like this will most likely fail in the server after build. Since assets/ folder is declared by default in the angular.json file. I suggest you use inline css just for the image only.
For instance:
<div class="bg-div" style="background-image: url(assets/images/imageX.png)"></div>
Then continue with the other css in your css file: i.e.
.bg-div: {
background-size: cover;
background-position: center center;
height: 100%;
position: relative;
}
This way it will work for both local builds during development and during deployment. You wont have to change the paths during build again.
This is if you have another external css file apart from the main angular's styles.css
Thanks for all your help. I figured out the answer.
First: my "formula" for the path was wrong. I should start counting from the parent of the folder that contains the file. So in this case: app contains the html, scss so I don't count it. However, its parent Src is 1 and it IS above the assets. so the path is ../assets etc at the point webstorm was happy with the path, but not with the file name.
SO, I got rid of the %20's in the path and replaced them with blanks.
Thus:
background: url("../assets/Images/SolutionHunter Splash Image.png") no-repeat center center fixed;
This works.
Thanks for your assist.
Yogi
See this Answer.
Detailed explanation to Angular's path resolution in CSS files.
https://stackoverflow.com/a/65799235/10569886
Related
when i change path of imag.Browser doesnot show image
working code
body {
background-image: url("D:\main.jpg");
background-repeat: no-repeat;
background-position : center;
background-attachment : fixed ;
}
same code but changing path of image does not show image in browser .Not Working
body {
background-image: url("D:\Source_Code\HTML\Adventure Time\main.jpg");
background-repeat: no-repeat;
background-position : center;
background-attachment : fixed ;
}
You should give the url path from the current css file and not from the root of you computer. Also it's slash not backslash.
For example if your css file that contains this is in adventure-time directory do : background-image: url("./main.jpg");
Try giving virtual path instead of physical path.
e.g.
background-image: url("/HTML/Adventure Time/main.jpg");
The reason most urls are relative is because that absolute urls will work albeit they do depend on the operating system. Which is not desired for maintainability.
To explain a relative url (since your relative url seems to be working for you) i made this example. I wil use the following file structure.:
Your webpages are in ./myWebsite/Pages
your CSS is in ./myWebsite/CSS
the images are in ./myWebsite/Images
Then the url of the image would be as follows:
background-image: url("./Images/main.jpg");
Breakdown of the url:
The url is made up of different parts to be simple. The first part would be the "./". This is simply to say something like "parent directory".
So the parent directory of the file which this line of code is in(./myWebsite/CSS/stylesheet.css) would be "./myWebsite/".
Then the next part is "Images/". This means something like; "select folder 'Images' ".
So now we navigated to the parent directory and then selected the folder where the images are located. The only thing left to do is to select the image, which is done by specifying its name and extension; "main.jpg".
Keep in mind this is a basic explanation
I have a simple project which has a product page. A splash (full width, fixed height div) will display a background-image which will change depending on the department.
I created the splash <div> using the following CSS class in my custom.css file.
.page-splash {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
padding: 180px 50px;
height:600px;
}
I have then moved a step further to create a separate class for each of the background images I would like to use.
.splash-chocolate {
background-image: url("abc.jpg");
}
.splash-vegetables {
background-image: url("123.jpg");
}
I call the classess in my html file as shown in the next piece of code below and this is where the fault begins. It causes my page to crash when loading.
Have I taken the wrong approach? or have I made a syntax error that I have overlooked? (image file / department names e.g chocolate have been simplified for the question).
<div class="page-splash splash-chocolate"></div>
All help greatly appreciated as always!
Edit - thanks to linus for correction:
Check to make sure you have the correct url path to the image. It could be trying to pull the image but is unable to find it
CSS background-image property not loading
If your css classes are in separate folders, you may need to specify in your url property the path to the correct folder.
I make a site in joomla.
In Media folder of joomla, I created the folder: Media/Photos and I placed in there a photo 0.Background.jpg.
I want to change the background of the default template by inserting in its css file the following code:
body{
background-image: url("media/photos/0.Background.jpg");
background-size: 100%;
}
But it cannot find the media/photos/0.Background.jpg, so the background cannot be applied ...
Your path given is relative to the folder that your CSS file is in.
So in your example, whatever folder your CSS file is in, you are asking it to look for a folder inside that called media, and then another folder inside that called photos.
I'm assuming your CSS file is in a template folder, and media is in the root?
If so, you just need to add a forward slash before media. If that doesn't work, then you'll need to work out what path your media folder is in relation to the folder your CSS file is in, and work to it from there.
So, try this first:
body{
background-image: url("/media/photos/0.Background.jpg"); /* is it media or Media? */
background-size: 100%;
}
I am new to mvc application and creating site in aspx view engine.
i have a css file in mycss/style.css and images are in images/img1.jpg.
what is the difference between
background: url("../images/img1.jpg") no-repeat;
and background: url("~/images/img1.jpg") no-repeat;
in style.css
background: url("../images/img1.jpg") no-repeat;
The above is relative to the current location. It goes up one folder, then down to the images folder and finally gets the picture file.
background: url("~/images/img1.jpg") no-repeat;
The above is invalid. The tilde means start at the site root. But CSS doesn't support that syntax. The equivalent would be background: url("/images/img1.jpg") no-repeat;.
Depending on your site layout, both will work. I tend to use root relative paths because if you move your CSS file to a different folder it might break with a path relative to the current location.
For a good discussion of relative vs site relative vs absolute, see this article.
You can also write it this way background: url("images/img1.jpg") no-repeat;
without any 'prefix' which means 'the images in the images folder.
This would be the correct way.
background: url("../images/img1.jpg") no-repeat;
This is quite embarrasing. I am learning new things but I am surprised I can't figure this out on my own.
On my desktop, I have a folder called Test and in that I have index.html and a folder called CSS, which contains index.css and another folder called images with an image called logo.png.
In my index.css file, I have the following line:
background: url("images/logo.png") no-repeat;
Using the above line I can't display the image locally. I tried using /images and test/images but it doesn't work. How can I display this if I am viewing it locally?
As you mentioned, you have different folders for CSS and images inside your root folder Test. Since you are writing code for background in your CSS file:
Case 1:
background:url("logo.png");
Will search for your image inside CSS folder.
Case2:
background:url("images/logo.png");
Will search for images folder first inside CSS folder and then will search for logo.png inside that images folder. (But there is no images folder inside your CSS folder).
Case3:
background: url("../images/logo.png") no-repeat;
In this case .. will take you back to the main directory (i.e. from css folder to your root forder Test. Then /images will take you inside images folder and it will find /logo.png as a path to your image.)
Change img to the name of your class. Use content instead of background or background-image, and Set some width.
img {
content: url("../img/Wizard-of-os-black.png");
width: 90px;
}
Try changing this to
background-image: url("images/logo.png") no-repeat;
Basically, you would have to think logically. If your in a CSS file in contained within a folder, all links in the file are searched in the folder. If you want to link to an image in a folder called /img in the root of your site, you would have to move up a level by using
../img/pic.extension