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?
Related
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)
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);
How to access images that are one folder above. The background-image does not appear in the html because of wrong directory or reference.
background-image:url("imgs/hours.png");
#schedules{
float: left;
margin-left:10%;
background-image: url(file:///C|/wamp/www/web/crosscafe/imgs/hours.png);
}
span {
font-weight:bold;
}
As said before, and just to make sure, if you're using WAMP you need to access the webpage through the localhost or any address that was provided for that purpose. Accessing through file:// normally ignores most of the server-side usage WAMP provides you with.
That being said, I think your problem is fairly simple. If you are using a framework file structure you probably have the following strcture:
imgs/
css/
js/
index.html
So, and since you're working on your CSS which is in the css subfolder, your URL needs to be the following:
background-image:url("../imgs/hours.png");
The two points (../) tell the browser to go to the parent folder, then into the imgs folder and then search for hours.png.
First of all, you should only comment css using /* and */. // in css will not be treated as comment at all.
For your problem, you should use firebug to make sure that your element which id is schedules have a appropriate height and width.
And, if you are using WAMP, access your website from a URL start with http://, that page could not display a image stored on your local side, I mean, via file://. This is prohibited by your broswer. You should use the relative path instead, and the relative path is start from your css file.
So you can try this:
#schedules{
float: left;
margin-left:10%;
background-image: url(imgs/hours.png);
height: 100px;
width: 100px;
}
and save "imgs" near your css file.
If you still have problems, I think you should paste your HTML on.
If you try to display an image from that imgs directory in other place in your website, does it is shows? If not, it can be your .htaccess file. It might be blocking the access to your images dir.
For some reason (which I can't seem to find), my .png image is not showing up.
I am trying to load it on the website through my CSS file and not as eg. <img src="images/Balloon_1.png">
<section id="container_1">
<header id="header_container_1">
<h1><a name="Over ons"></a>Over ons</h1>
</header>
<div id="Balloon_1"></div>
CSS:
#Balloon_1{
background: url(images/Balloon1.png);
display: block;
height: 70px;
width: 64px;
}
Before providing an answer; some advice. Good coding standards designate that if Balloon1 is a design element for the page then yes you should load it as a background through CSS. If it's simply an image on the page that doesn't contribute to the site layout then you should continue to load it as an img tag.
Now I'll elaborate on the answers others have given you.
background: url(images/Balloon1.png);
is a file path relative to where this code is in a file. So if you have a CSS file in a folder called style, then this is looking for Balloon1.png in style/images/Baloon1.png.
background: url(/images/Balloon1.png);
in this example, leading with a forward slash '/' indicates that the path should begin in the root directory of your site. The root directory is your main folder, the lowest case denominator.
background: url(../images/Balloon1.png);
In this example the two periods are used to tell the path to start in the parent directory of wherever your file is. So again if you have a CSS file in a folder called style, then this is looking for Balloon1.png in whateverFolderStyleIsIn/images/Baloon1.png. You can combine this technique to back out of multiple files to start where you want using ../../images/Balloon1.png and so forth.
background: url(http://YourURL.com/images/Balloon1.png);
In this example the link is no longer relative and is direct. It points directly to your image file, but has the unfortunate effect of making your code only apply to that URL, you wouldn't be able to copy and paste this code to a different site without rewriting the direct url.
Works fine...?
You have some sort of linking problem:
http://jsfiddle.net/SinisterSystems/SeC6W/
HTML
<section id="container_1">
<header id="header_container_1">
<h1><a name="Over ons"></a>Over ons</h1>
</header>
<div id="Balloon_1"></div>
CSS:
#Balloon_1 {
background:url(http://www.online-image-editor.com/styles/2013/images/example_image.png);
width:100px;
height:100px;
display:block;
}
With your current code, please ensure your .png images resides exactly like this.
Index.html file root -> Images Folder -> Balloon1.png
And your CSS file is linking to the image as such:
../../images/Balloon1.png
Final answer for you.
You have an assets folder, so you had to drop back twice. By just doing ../ you were only going back to your assets folder, not your root.
Root is where your index.html lies.
Root -> Assets -> CSS -> Style.css is where your style.css lies.
Root -> Images -> Balloon1.png is where your image lies.
So, because your CSS file is deeper in the tree, you have to backtrack twice to get back to your Root.
Root -> Assets
Root
Then you can progress to...
Root -> Images -> File.
It maybe too late, and may not be very much relevant, but it is really helpful and saves me a lot of headache. There is an extension available for VS Code called Path Intellisense , whenever you type ./ or ../ in your code, the intellisense dropdown will show you the paths and folders. This really makes life easy and the worries of getting lost in wrong paths is over.
Here's the link: https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
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.