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;
Related
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
So I have two sections in my HTML5, and I titled one section id = "section_2". In my CSS3, I tried to do:
#section_2{
background-image: url(image.jpg);
}
However, this did not work.
So when I went into my HTML5 and put right under the tag, it worked.
This is strange because when I do things like,
#aside{
background-image: url(image.jpg);
}
it works.
Sounds like you could have an issue with the relative location of the image.jpg. When called from with the page the url must be relative to the page. When called from within the CSS file, it must be relative to the CSS file, not necessarily the page.
e.g.
index.html
css/style.css
image.jpg
You may need for example:
background-image: url('../image.jpg');
You could also be experience an issue with the level of importance, depending on how many background-image attributes are being applied, in which case try using !important.
background-image: url(image.jpg) !important;
Be certain that the image.jpg is relative to the style.css location.
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 changed my main image to a css background property but when i open my index.html the image does not show up.
I used the following property inside my custom.css file.
background: url("/img/banner-bg.jpg");
background-repeat: no-repeat;
height: 80%;
background-attachment: fixed;
background-position: center center;
background-size: contain;
However the weird is when i try to live preview with brackets it is showing up just fine.
Put trailing dots before your img folder path and make sure the file is in the folder
If that doesn't work, find the image in explorer, right click to get the properties and find the full image path. Use the full image path preceded by
file://
e.g.
background-image:url("file:///C:/Users/Rachel/SkyDrive/webdesign/img/banner-bg.jpg");
and that should work
I think the problem is a slash at the start of the string. There's a difference between if you start path with slash or not.
For example if you working on localhost and path to the folder where the css file exists looks like that:
localhost/yourProjectFolder/and/all/of/subfolders/
With slash:
background: url("/img/banner-bg.jpg");
//returns absolute path : localhost/img/banner-bg.jpg
Without slash:
background: url("img/banner-bg.jpg");
// returns absolute path : localhost/yourProjectFolder/and/all/of/subfolders/img/banner-bg.jpg
I have config/routes.rb routed to app/view/home/index.html.erb
index.html.erb is linket to app/assets/stylesheets/home.css
It works fine and I've given style to my index site.
The problem is when I try to assign a logo as a background located in app/assets/images/logo.png
I try this in home.css and it doesn't work:
body
{
background: #FFF url('../images/logo.png') no-repeat top left;
}
The only way to make it work is move logo.png to the stylesheets folder, but I don't want to do that.
So, how can I use a image as a background, which is in another folder?
Actually you can make it working using the Sprockets Url Rewriter. It's a little gem that rewrites relative CSS urls to absolute ones. with that you can use:
body { background: #FFF url(logo.png) no-repeat top left; }
Read the asset pipeline guide to better understand what is going on. Or you could go for the official suggestion. Personally I prefer the Url rewriter approach. It's cleaner.