I have an image in the assets/images and I want to set it as a background on the main page refers to a given class, but I do not see image in production Heroku
application.scss
.has-bg-img { background: url('img.PNG'); center center; background-size:cover; }
In my Rails app, I change the filename to end with .scss.erb and then have the following as an example. A comment at the top, followed by the example.
//= depend_on_asset "sprite-article-r4.svg"
.contents {
background-image:url('<%= asset_path("sprite-article-r5.svg") %>');
}
Reference this SO question
you must set a full path like url('localhost/apps/assets/images/myimg.jpg')
If your assets are not static and committed into your repo, and you're trying to reference a dynamically uploaded image, you might have to read on how to work around with Heroku's ephemeral filesystem
You can try image-url or asset-url helpers.
Asset Pipeline
Edit :
actually, i'm not sure about your syntax
.has-bg-img {
background-image: url('img.PNG');
background-position: center center;
background-size:cover;
}
it should work better.
In Rails, you have to prepend directory name to url. For your case change
.has-bg-img { background: url('img.PNG'); center center; background-size:cover; }
to
.has-bg-img { background: image-url('img.PNG'); center center; background-size:cover; }
This is because you are storing your image in images(assets/images) directory.
Try to the following
.has-bg-img {
background-image: asset-url('img.png');
background-size: cover;
}
This should work, I don't why you use center center; I think that is syntactically invalid see this Horizontal & Vertical Align
Related
Simple thing. I need to use my own background for LoginOverlay in Vaadin 23.
I tried crazy magic with stuff like this
vaadin-login-overlay-wrapper
vaadin-login-backdrop-wrapper
and it did not work.
Create a file vaadin-login-overlay-wrapper.css in frontend/<your theme>/components
Then you can set the background image
:host [part="brand"] {
background-image: url("images/login-banner.jpg");
background-size: cover;
background-position-x: center;
}
I'm trying to set a background image for a class.
This is my file structure using laravel-mix:
What's wrong with my code in app.scss file?
.header-bg {
background-image: url('img/illustration-main.jpg');
background-size: cover;
}
Tried this but also not working:
.header-bg {
background-image: url(require('img/illustration-main.jpg'));
background-size: cover;
}
Here in case the content of the img folder:
If your css file is being built to dist/app.css your image path should be relative to this. Since your img folder is sibling to dist, try url('../img/illustration-main.jpg')
How to apply background image from local drive instead of internet. Where is the mistake?
I have tried this way, it is success. (URL from Internet)
body.my-login-page {
background: url(https://hdwallsource.com/img/2014/9/green-gradient-wallpaper-26051-26736-hd-wallpapers.jpg) #277214 no-repeat;
}
But this method is unsuccessful. (path from Local)
body.my-login-page {
/* background-color: #6aaaeb; */
background: url(/images/green_wallpaper.jpg) #277214 no-repeat;
}
My answer, just apply as david said above with double dot ".."
body.my-login-page {
background: url(../images/green_wallpaper.jpg) #277214 no-repeat;
}
It should work if you use a full file path, or add a "..".
Full File Path Example: C:\Users\Photos\image.png
".." Example: ../Photos/image.png
Comment on this post if that does not work, but in the past, that has worked for me. Also, I would suggest using <img src="/images/file.png"></img>, since in my experience it has better compatibility.
Here is a fixed version of your example, using both of the methods I stated:
".." Example:
body.my-login-page {
background: url(../images/green_wallpaper.jpg) #277214 no-repeat;
}
Full File Path Example:
body.my-login-page {
background: url(C:/<INSERT PATH>/images/green_wallpaper.jpg) #277214 no-repeat;
}
#hero {
background: url('/wp-content/themes/bootstrap2wordpress/assets/img/hero-bg.jpg') 50% 0 repeat
}
Here is my code but still doesn't work
Without more information (some HTML to go with it) or a webpage you are having trouble with, it is very hard to understand what you are trying to accomplish.
I would try something like this, as it sounds like you are trying to have the background image repeat.
hero {
background: url('/wp-content/themes/bootstrap2wordpress/assets/img/hero-bg.jpg') repeat;
}
https://www.w3schools.com/cssref/css3_pr_background.asp
Try this, But you need to add this to your header.php or any PHP file header section. This will not work in CSS file.For more details visit URL
<style>
.hero {
background-image: url("<?php echo content_url(); ?>/wp-content/themes/bootstrap2wordpress/assets/img/hero-bg.jpg") 50% 0 repeat;
}
</style>
Hope this will help you.
Just navigate up a directory or two using ../
hero {
background: url('../../img/hero-bg.jpg') repeat;
}
I am assuming hero is your class name thats why prefixed with .
In your code I could not find . , so check the same one more time.This also can be one issue if it is not there in your code.
Can you try this way:
.hero {
background: url('/wp-content/themes/bootstrap2wordpress/assets/img/hero-bg.jpg');
background-size: 50% 0;
background-repeat: repeat;
}
Hi I'm a new developer and I'm trying to build a portfolio site for myself. Anyway, I can't seem to get the background image I put together to show. The image is located in the images folder of my CSS folder. I notice if I try to put a background color in it works just fine. However, I don't want a background color just an image.
The file pathway in my project is as follows:
ProjectName > SiteRoot > CSS > images > hmebckgnd.jpg
This is my code for styles.css
body{
background-image: url('/images/hmebckgnd.jpg');
background-repeat: no-repeat;
margin: 0;
}
The first / in the path attempts to find the images folder from the root directory, removing it will load it relative to the directory the stylesheet is in (which should be the CSS folder):
body{
background-image: url('images/hmebckgnd.jpg');
background-repeat: no-repeat;
margin: 0;
}
If your image has path like this:
ProjectName > SiteRoot > CSS > images > hmebckgnd.jpg
why don't you include css directory in css file?
body{
background-image: url('../images/hmebckgnd.jpg');
background-repeat: no-repeat;
margin: 0;
}
It is good practice to use relative path in css file and load whole css file with forward slash in your HTML file.