Insert an image that already exists in the project folder - css

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.

Related

Background: url('') shorthand isn't retrieving my image in CSS

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.

Find the relative path using CSS

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)

Background hides when moving css to css folder?

when my css is located in the root of my website, the background loads fine by adding
background: url(images/main-bg.jpg) repeat;
into the body, but when i move the css into a folder named "css" and re-link the HREF it seems to disappear?
Are you using relative links correctly? If you're moving that .css file into a folder, the new relative path should be
background: url(../images/main-bg.jpg) repeat;
...if the images folder is in the root folder as well.
You can use a debugger like Chrome's developer tools or Firebug to double check if the resource is being loaded correctly.
Try to change path to resource background: url(../images/main-bg.jpg) repeat;
You'll need to update the CSS. The url is relative to the relationship of the CSS to the image (not the document). Try background:url(../images/main-bg.jpg) repeat;
That's because your CSS is now searching for the image in (root)/css/images/main-bg.jpg, you need to use a relative path.
background: url(../images/main-bg.jpg) repeat;
.. means go back one directory.

css image from hard disk

im about to build a GUI and I am trying to load an image as background image via css.
My HTML sheet is nearly empty except the headline and a div container in which I load the GUI, built with JAVA and the Google Web Toolkit.
Loading the background image from the internet works out pretty well!
.Bild {
background: url("http://developer.aldebaran-robotics.com/media/img/home/nao_h25.png")
no-repeat
center;
}
BUT now i want to load it from my hard disk, better to say from a folder in the project.
The structure looks like this:
workspace → project → war → css file
workspace
→ project
→ images
→ image.png
I tried it by using a relative path. I am not sure if I did it correctly. It doesnt work:
.Bild {
background: url(/images/image.png)
no-repeat
center;
}
Im sure you can help me!
Thanks a lot
You need to provide the path of the image file relative to the css file
Lets take your directory structure example:
workspace/
project/
war/
cssfile.css
images/
image.png
Your image path relative to the css file would have to be
../images/image.png
.Bild {
background: url(../images/image.png)
no-repeat
center;
}
Here: .. means one directory above the current directory. You can use ../../ to go two directories up.
To figure out the relative path, you need to navigate up to the common parent directory and then walk down to the location of the media file. In this case, the common parent directory is one level up, hence ../ is enough and then walk down the directory structure images/image.png.
There is nothing wrong with the syntax. So the problem must be with the path.
By starting the url with a slash /,
/images/image.png
implies an absolute location of
http://some-host-name/images/image.png
is that where your image is?

How to access my .png from a folder using CSS?

I have a folder called "Images" inside my IDE and I want to access this file for my CSS property background-repeat:repeat;
How do I "call" it?
images/background.png isn't working! :(
EDIT: Here's the solution showing the hierarchy. Any help? :)
EDIT3:
I've got this now on my CSS:
body
{
background-color: #FFFFFF;
background-image: ../../Images/BackgroundPatternAlt.png;
background-repeat:repeat;
}
According to my solution explorer picture, it should work but it isn't. Any help?
ps. To clarify my CSS can modify my page properly because if I change the background-color, everything changes properly. The error must be inside the background-image address. T_T
The background images you define inside CSS is always relative to the path of the CSS (if you do not explicitly say not to).
So, if you want to use:
background: url(images/background.png) repeat;
...the CSS-file must be located in the "parent"/root of the images-folder, so I suggest you move the Images folder into App_Themes/Default.
Depends where the css file is in relation to the image. Is the .css file in a folder off the root? If so try "../images/background.png"
Depending on your web-server, pathnames can be case sensitive, so it would be:
Images/background.png
Edit: If your Images folder is in the document root of the web-server, you can always use:
/Images/background.png
As I see the picture, you must try yet another level up, at this path: ../../../Images/
Try '../../images/background.png' if the folder structure remains the same as in your Solution Explorer.

Resources