I am trying to add a background using the following, placed inside custom.css:
}
body {
background-image: url("img/background.jpg");
}
custom.css is in folder HTML/css
background.jpg is in folder HTML/img
What should I do so that the background works? Right now it doesn't appear at all.
Go up a level with your URL selector using ..:
background-image: url("../img/background.jpg");
That will go up a level (to the HTML folder) and then find the background.jpg file in the img folder.
It's because your 'img' folder is in a different directory to your 'css' folder.
Try
background-image: url("../img/background.jpg");
Please use :
body{
background-image: url('../img/background.jpg');
}
Related
Currently I have a Vue.js project with this file tree (showing only relevant folders and files):
root
src
assets
image.jpg
components
header.vue
index.html
So inside the header.vue component, I have this CSS code:
.background-image {
background-image: url();
}
and I need to reference the image.jpg file inside the assets folder. I tried so many different combinations and never saw the image, so I just can't figure it out.
You could try the following:
.background-image {
background-image: url('../assets/image.jpg');
}
If it's not showing, one possible reason is that, the element .background-image doesn't have a height especially if it doesn't have any content yet. Try adding padding or height.
.background-image {
background-image: url("../assets/image.jpg");
padding: 50px;
}
I want to add a background-image with a laravel URL. I can do this by just including the web path itself but I would like to use Laravel URL.
Here is how I do it now:
.mystyle{
background-image: url("www.myproject.com/assets/img/background.png")
}
Here is how I want it:
.mystyle{
background-image: url("{{ URL::asset('assets/img/background.png }}")
}
Any clues?
You can even use it like this:
.mystyle{
background-image: url("/assets/img/background.png")
}
Put your image into public/assets/img directory and use the asset() helper:
.mystyle{
background-image: url("{{ asset('assets/img/background.png') }}")
}
I have used inline css for a class and this is what actually worked in my case
style=" background-image: url('{{asset('images/cover.jpg')}}');"
This absolutely work
.mystyle {
background-image: url("../assets/img/background.png")
}
If assets is a folder in your public directory then you can write like that
style="background-image: url({{asset('assets/img/background.png')}})"
The best way . Transfer the contents of the css file to blade php file. Then use
background-image: url({{asset('assets/img/background.png')}})"
if you are using new version of Laravel then follow below.
public/img/test.png
if your image exists in the public root dir of the application then you don't need to specify public, you need to put ../ to go one step back and find the image.
background-image: url('../img/test.png');
The way that works for me:
url("../images/formIcons/seeingEye96.png");
in the backgroundi-image add
background-image: url({{asset('assets/img/background.png')}})"
hope after doing this you find the output
This problem has been setting my nerves off.
I have for example this snippet of code which works:
body {
background-image: url("http://i.imgur.com/uN8yFlU.png");
background-repeat: repeat;
}
And this one which does not:
body {
background-image: url("/resources/navbar-bg.png");
background-repeat: repeat;
}
The only difference between these two code blocks is the way I reference the background image. The former uses a URL, and the latter references a file in the root/resources directory.
My root directory is
Index.html
resources
CSS
etc.
Everything depends where those lines resides, because it is relative to the current file:
background-image: url("resources/navbar-bg.png");
If your CSS is in http://example.com/styles.css it will search for http://example.com/resources/navbar-bg.png.
If your CSS is in http://example.com/theme/styles.css it will search for http://example.com/theme/resources/navbar-bg.png.
If you want to refer to a file in the root directory, just put the path with a slash:
background-image: url("/resources/navbar-bg.png");
I tried setting my background image this way:
body
font: 100% $font-stack
background: url(images/body-bg.png) repeat #181d25
But it is showing an error, i.e. invalid. Can anyone help me?
Is the images folder a subdirectory of your css folder? If it is a sibling of your css folder you have to move up the file tree.
background: url("../images/body-bg.png") repeat #181d25;
I cant figure out the right path to use in my CSS file for
html { background-image: url('backgroundImage.jpg'); }
My folder structure is as follows:
..\MySite\ <!-- HTML files here -->
..\MySite\css\
..\MySite\js\
..\MySite\images\ <!-- backgroundImage.jpg here -->
html{ background-image: url('../images/backgroundImage.jpg'); }
../ is telling your CSS file to go one directory back and search for the image from that folder (in this case your root folder)
use html{ background-image: url('/images/backgroundImage.jpg'); }
starting with / means you start at the root of your site
Pretty trivial question. If you are using inline styles (styles inside HTML files) then the following will suffice.
html {
background-image: url('images/backgroundImage.jpg');
}
However if you are referencing images from within the css folder you'll have to use .. traversal to reach the parent folder first.
html {
background-image: url('../images/backgroundImage.jpg');
}