I am trying to include a background image in a css file located here:
public_html/css/folder/style.css
and the image is located in
public_html/img/image.png
I tried using
background: url("../img/image.png");
How can I get to that image?
Thank you
You have to go up 2 steps in the directory structure:
background: url("../../img/image.png");
Related
My image is called main-homepage-img.jpg, it is located in the img folder that is in my project folder along with index.html and style.css. I have tried background: url('../img/main-homepage-img.jpg') and plenty more variations, none working. How do I retrieve it? I have no issue doing it in HTML but I'd like to retrieve it via CSS.
If your file directory tree is structured how it sounds, it sounds you can just use background-image: URL('./img/main-homepage-img.jpg'); and it should be able to find the image.
I'm following a tutorial of a responsive website using Jekyll.
I'm working on the header now and I'm trying to use an image as the background of the header, but I'm having problem to find the relative path for this image.
This is the path of the image in my computer: /Users/CaroleCarlos/Pictures/60H.png
and
This is the path of the folder I'm saving my project: /Users/CaroleCarlos/Desktop/DevTips-Starter-Kit-Jekyll-Starter-Kit
I'm using the following code to set the image as the background using sass:
header {
height: 450px;
background: url(../Pictures/60H.png);
}
but I does not work. I've tried another paths also but I don't know what I'm doing wrong that I can't find the image.
I'm using Expresso as my text editor.
I know it is not a hard thing to solve, but I've been trying to make it work for a while now, and I can't figure it out.
You need to go two directories back like the below code. ../ is a filler for each directory level in relative paths.
header {
height: 450px;
background: url(../../Pictures/60H.png);
}
I would recomment you to make your projet in on folder to prevent this.
you should make a folder images like so : /Users/CaroleCarlos/Desktop/DevTips-Starter-Kit-Jekyll-Starter-Kit/images
Then your path should me background: url(images/60H.png)
I have this image in one of my project's folder:
I wantto make a icon with that image, so i tried to call it like this:
But it keeps occuring the error:
I think I have this error because I'm not giving any path.
Can you help me please?
Thanks
The css file is searching in the same folder as it to find the background image.
Try:
background: url("../img/Arrow_Circle_Right-32.png")
The ".." goes back one folder, then the img accesses the image folder.
Use this path in your css:
background: #ff9900 url("../img/Arrow_Circle_Right-32.png") no-repeat 10px center;
Please note the prefix for your base path: ../img/
Like that you go back from the css directory and then you enter in your img directory, that include your image.
My css file is available on the inner folder of css subfolder /css/coverdesign/mycss.css.
From that css I need to load background image url. Image is available on sub-folder /images/
I had used the following code.
background: url(../images/cover.jpg);
Guide me to load image by using proper url
Folder Structure:
/css/
/coverdesign/
- mycss.css
/images/
- cover.jpg
you need to go up 2 levels
background: url(../../images/cover.jpg);
first level to coverdesign, then css, then down into images
try absolute path
background: url(/images/cover.jpg);
or relative (go up two level)
background: url(../../images/cover.jpg);
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;