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.
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
I know it's repetitious question but I have problem with my code.
I have searched stackoverflow and w3schools for a background image setting
and wrote the code that was on both sites exactly but still I have problem with the following code.
body {
background-image: url("C:\Users\mehra\Desktop\Male-Fitness-Models-BAck.jpg");
}
or
body{ background-image: url("Male-Fitness-Models-BAck.jpg"); }
above are the codes I used for setting background, but neither of them work.
HTML picture
If the background image file location is correct you might need to add a height and width to the container of the background image.
body {
height: 500px;
width: 500px;
background-image: url("C:\Users\mehra\Desktop\Male-Fitness-Models-BAck.jpg");
}
There are a few things to investigate to ensure it always works:
1) Using the project absolute path:
ensure you have FollowSymLinks in your vhosts enabled, that way you can use / in the src to call the image.
e.g. <img src="/images/dog.png" />
2) Make sure the image exists
copy and paste the src that's displayed in the browser (inspect with firebug, or view-page source to get the link) into the url bar and see what it returns - if it's a 404 then it doesn't exist on the path you gave, if it's 403 the path might be set to really strict permissions (755 on directories and 644 for files is recommended) and you might have to tweak your vhosts file to allow people to view the content, but not access the file tree.
3) If the image does exist, there is no message (other than 200) and you're using the path correctly - then it's probably because the div is empty. A background on a div with no content will result in empty space, because the background is stretching itself over 0 pixels. Add a min-height and min-width rule to your css or use inside the div:
CSS:
div {
background: url('/images/dog.png');
min-height: 50px;
min-width: 50px;
}
HTML:
<div> </div>
4) Use a proper folder structure
by using a file tree that makes sense, it makes resources easier to manage.
Hosting every file in the DOCUMENT_ROOT is messy, I'd recommend the below structure:
|--index.html
|----images/
|----css/
|----js/
that's a basic structure, then you can add more folders based on area e.g.
|--index.html
|----[area]/
|----images/
|----css/
|----js/
body
{
background : cover;
background: url("http://quizdoo.com/wp-content/uploads/qc-images/58d2957b47354.jpg");
}
<body>
</body>
Add background size to make it visible
body
{
background: cover;
background-image: url("C:\Users\mehra\Desktop\Male-Fitness-Models-BAck.jpg");
}
If you are using a PC saved image path make sure to replace the \ with / and it will work.
example:
background-image:url("C:/Users/foldername/Desktop/images/City_Landscape_Background.jpg");
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.
It's a silly question but I can't find the right way to do it.
I am making a Wordpress theme for myself and in the CSS, I am specifying image sources with my full domain.
Example:
#header {
background: #ffffff url("http://mydomain.com/wp-content/themes/mytheme/images/header-bg.jpg");
}
I want to make sure that everything works if I install the theme in another domain. What is the proper way to specify the source in this case?
You just have to use relative paths to the CSS file, for example if you have the following structure:
/mytheme/images/header-bg.jpg
/mytheme/style.css
Then at style.css make the rule like this:
#header {
background: #ffffff url("images/header-bg.jpg");
}
As Wesley had said before - just remove http://mydomain.com
And you need to work out a correct relative path to images catalog. I suppose your css is in wp-content/themes/mytheme/css, so i would change it to:
#header {
background: #ffffff url("../images/header-bg.jpg");
}
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;