I'd humbly appreciate any help on this one.
I have a div with background: url("../images/description_bkgrnd.jpg") repeat; display: none;
Later this div is made visible with jQuery.
When the url looks like http://localhost/product-name-p35/ all is OK, but when it looks something
like http://localhost/product-name-p35/RU/ browser fails to load the image.
In firebug I see that it is trying to load http://localhost/product-name-p35/images/description_bkgrnd.jpg,
not http://localhost/images/description_bkgrnd.jpg/
what is to blame?
url("../images/description_bkgrnd.jpg")
This is a relative path. When you are in the directory http://localhost/product-name-p35/RU/, it is loading the image from http://localhost/product-name-p35/ (because of the .. )
One possible way to fix this is to reference your image with an absolute path:
url("http://localhost/images/description_bkgrnd.jpg")
Another possible way is to use
url("/images/description_bkgrnd.jpg")
The / at the beginning makes the browser send the request to the root of the website. But do ensure that the images folder is in the website-root, or modify the URL accordingly.
Reference: http://www.ibdhost.com/help/path/
.. means that you are going up one level so when you are at RU folder it will go to /product-name-p35 folder
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.
So I am working on a website and I'm trying to set the background of empty div with a set size and I can't figure out why it isn't working. Anyone see something I don't? Thanks, Tim.
Code:
.headerbg{
width:100%;
background-image:url('bg.jpg');
height:500px;
margin-bottom:25px;
}
<div class="headerbg">
</div>
To prevent such errors, you should define your urls relative to the document root. For instance, if your image is at http://example.com/path/to/image.jpg then you should use url('/path/to/image.jpg'). This removes any possible ambiguity.
There is nothing wrong with your code, when I try it with a different image, it works fine:
background-image:url('http://placekitten.com/100/100');
http://jsfiddle.net/Guffa/bWKBB/
So, the reason for the problem is that the browser can't find the image. There can be several reasons for that, like:
The image doesn't exist
The image exists in a different folder
If you have the CSS code in a style tag in the page, the URL for the image is relative to the location of the page. If you have the CSS code in a style sheet, the URL for the image is relative to the location of the style sheet file.
I'm trying to use background image in CSS but even though I gave the full path of the image, it doesn't work. Firebug shows "Failed to load given URL".
I'm sure that there is no permission problem in that folder.
My CSS class is
body {
background: url("H:/media/css/static/img/sprites/buttons-v3-10.png") repeat-x scroll left -800px #DCDCDC;
color: black;
font: 13px/1.2em arial,helvetica,clean,sans-serif;
height: 100%;
position: relative;
}
What could be causing the issue?
You are using a local path. Is that really what you want? If it is, you need to use the file:/// prefix:
file:///H:/media/css/static/img/sprites/buttons-v3-10.png
obviously, this will work only on your local computer.
Also, in many modern browsers, this works only if the page itself is also on a local file path. Addressing local files from remote (http://, https://) pages has been widely disabled due to security reasons.
I know this is really old, but I'm posting my solution anyways since google finds this thread.
background-image: url('./imagefolder/image.jpg');
That is what I do. Two dots means drill back one directory closer to root ".." while one "." should mean start where you are at as if it were root. I was having similar issues but adding that fixed it for me. You can even leave the "." in it when uploading to your host because it should work fine so long as your directory setup is exactly the same.
Source location should be the URL (relative to the css file or full web location), not a file system full path, for example:
background: url("http://localhost/media/css/static/img/sprites/buttons-v3-10.png");
background: url("static/img/sprites/buttons-v3-10.png");
Alternatively, you can try to use file:/// protocol prefix.
source URL for image can be a URL on a website like http://www.google.co.il/images/srpr/nav_logo73.png or https://https.openbsd.org/images/tshirt-26_front.gif or if you want to use a local file try this: url("file:///MacintoshHDOriginal/Users/lowri/Desktop/acgnx/image s/images/acgn-site-background-X_07.jpg")
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.