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)
Related
I have tried to link a path for an image in my CSS several different ways but it won't work is there anything that I'm missing?
background:src="C:\Users\simcity\Documents\HTML\Header.jpg";
It looks like you're trying to set a background image.
In that case
background: url('C:Users/simcity/Documents/HTML/Header.jpg');
would be the appropriate method.
Actually you must not use local paths, but else URL paths so for example:
background:src="C:\Users\simcity\Documents\HTML\Header.jpg"; might be:
background:src="Header.jpg"; if your image resides at the same level of your html document or background:src="/path/to/your/html/and/img_folder/Header.jpg"; if the image is in another folder (the folder must be at the same level of your html)
EDIT:
is background:url('path for the image') not background:src="path for the image"
I think the CSS syntax what you are looking for:
#id {
background: url("C:\Users\simcity\Documents\HTML\Header.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.
#main {
background: url("images/bg_grey.png");
}
I have this code into my main.css but GWT can't find the image (it is into the default images folder of my GWT-project).
With JAVA there are lots methods like GWT.getModuleBaseURL(), but, into the CSS, how can i recover the correct path for my image?
It's relative to the CSS location.
For example, if the CSS is in /css/myStyle.css, the path for the image would be ../images/bg_grey.png
Arg, it's getting frustrating!
None of the solutions on Stack Overflow are working for me, and I just don't know why my background-image isn't showing!
I gave it a background-color, and it worked fine. Offline you can see the background-image, but when I upload my site it's gone. When I type the path of my image, it shows. So it's there.
This is the site:
http://stilld.nl/2014/
In the dark blue area should be my logo.
#fade-it{
background: url('../images/branding.png');
margin-left: auto;
margin-right: auto;
display: block;
width: 408px;
height: 500px;
opacity: 1;
position: relative;
overflow: hidden;
z-index: 2000;
}
I've tried a ridiculous high z-index, still nothing. I tried opacity: 1. Nothing. I tried display: block. Nothing. I checked the path a thousand times. I used background: and background-image:. Still nothing.
Hope you guys can help me out!!
The file branding.png does not exist on your live server. Check it's location and make sure that:
The file is in the right place;
The CSS is referring to it correctly.
For reference, the way your CSS is currently set-up, it attempting to load this image from: http://stilld.nl/2014/images/branding.png. Try clicking the link, you'll see it returns a 404 'not found' error page.
I think the path that you have provided is not matching on deployed site.
Try giving image path as
background: url('./images/branding.png');
instead of
background: url('../images/branding.png');
may be this will work
You should make sure that the image is in the right folder, relative to the URL you're using.
../images/image.jpg means "go up one folder, find a folder named "images" and use the image called "image.jpg" inside."
./images/image.jpg means "find a folder called "images" in this current folder and use the image called "image.jpg".
/images/image.jpg means go to the root folder, find folder "images" and use "image.jpg".
EDIT: Found it.
Your image is in /2014/images/. Right now you're trying to make it find the images folder inside the 2014 folder. What you can do is set the path to:
/2014/images/branding.png
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?