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%;
}
Related
My background image not appearing in WordPress though I have included this code in my style.css
body{
background: url("/wp-content/themes/my_theme/images.png");
}
Please help.
To add the theme background image in wordpress add the below code in css file .Used ../ to go to folder instead of using the full path
body{
background: url("../images.png");
}
body { background: url("./images.png");}
I tried this out with a test site local hosted on XAMPP. Single dot for relative URL in the same directory, it must be a Wordpress/localhost thing because usually just "images.png" works.
okay I find it out.
My wp-content folder was also inside a folder named wordpress.
so the correct code would be :
body {
background : url("/wordpress/wp-content/themes/my_theme/images.png");
}
I'm having trouble getting my background image to show on all of my html pages. I was able to get the image to be the full background on all pages before, but after I put the image into a folder in my project, it's no longer working. I have a folder called images inside of my project that contains the image I want to use as my background so I added the images/ path. I double checked the name of the folder, name of my image, and also to see if its a jpg (which it is). I also checked my CSS code and no not have body mentioned anywhere else or background-image anywhere else. Can't think of anything else I'm doing wrong. Any suggestions? Thanks!
body{
background-image: url(images/main.jpg);
background-repeat: no-repeat;
background-size: cover;
}
If the images directory is next to the css file then it will be like this
background-image: url(./images/main.jpg);
but if the style file is inside a directory next to the images directory, then it will be like this
background-image: url(../images/main.jpg);
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
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
I have this in an external css file, but its not working at all. I would assume I'd written it wrong, but when placed internally, it works fine. Any ideas as to what might be going on?
html
{
background-image:url(images/background-grid.jpg);
background-repeat:repeat;
}
I assume your CSS file is in a folder like this.
/
css/
yourcss.css
images/
background-grid.jpg
index.html
The paths given in your CSS file are relative to the path of the CSS file (in the example I given, the css folder). So you should use ..:
background-image: url(../images/background-grid.jpg);
I think you didn't write it completely wrong
But it's better to use body instead of html.
Explanation why to use body
It allows you to use an overlay on top of that body tag. Like a grid-ish background on the body and a shade on the side. But both are correct. Depending on what you are trying to do ofc.
If you don't repeat your background there is a possibility that your picture doesn't use the whole page and then you should use the html tag. But in this case it gives the same solution because of that repeat.
SO replay: tnx to attronics
Explanation of your 'error'
If your images are in a different folder than your html page (which should be the case).
You should use .. as relative path to your css file.
Without the .. it would mean that you are going to look for that image in the same folder as your html page.
body{
background-image:url(../images/background-grid.jpg);
background-repeat:repeat;
}
Here is a site that gives some Basics of CSS. Didn't check the source though.
It may be your folder structure, try
html
{
background-image:url(../images/background-grid.jpg);
background-repeat:repeat;
}
When we have these folders
css
img
and index.html
when we write css in style tag in index page which is called internal css then it works right but when we right css in styles.css in css folder then background img does not work.
because you move with in folder and path of background img does not work. so you have to write like this:
background-image: url('../img/bg.jpg');
then it will work properly
.. this mean go one level up.
So, if your folder structure is like this:
image/
background.png
css/
stylesheet.css
then your css rule should be like this:
html {
background-image: url('../image/background.png');
}
If your folder structure is like this:
style/
image/
bgr/
background.png
css/
deeper/
stylesheet.css
then, go up two levels to the image directory like below:
html {
background-image: url('../../image/bgr/background.png');
}
And so on. Just add up the .. followed by trailing slash /.