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')
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 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
#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;
}
I have tried following both ways but always getting failed to load image. Tell me what's wrong in this code
header{
background-image: url("intro5.jpg");
background-image: url('intro5.jpg');
}
header{
background-image: url("correctpathtoimage/intro5.jpg");
background-image: url('correctpathtoimage/intro5.jpg');
}
whats the path/position of the images folder relative to the style sheet folder?
You have to give proper path of image as below,
header{
background-image: url("path_name/intro5.jpg");
background-image: url('path_name/intro5.jpg');
}
so let say that structure of your page looks like this
/images
intro5.jpg
someotherimage1.jpg
someotherimage2.jpg
etc...
/js
/css
style.css
index.html
your index.html file is in main folder. if you load styles from file in CSS folder then the path to your image should look like this:
background-image: url('../images/intro5.jpg');
if you load styles INLINE inside index.html then the path should be
background-image: url('images/intro5.jpg');
second of all it depends to what are you attaching the background-image ?
if it is an anchor <a> then you need to add display: block; below the background-image because some of the elements are inline and inline elements can't have a set width or height
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.