I seem to be having issues with my webpage once I load my files onto a server I am using. I suspect that the issue revolves around the local location of links vs. the location on the server but I am not sure how to alter the links so that they will work once on the server. Below is my CSS that I am using to display my background image which displays fine locally
#topContainer {
background-image:url("images/background.jpg");
height: 400px;
width: 100%;
background-size: cover;
}
I have double checked spelling and capital letter sensitivity but no luck. The image (background.jpg) exists in a subfolder labeled "images"
Any thoughts would be greatly appreciated
Try to change link from
background-image:url("/images/background.jpg");
If it help good but if not give us more information...
if your css is per se in this folder: project/css/style.css
and you're trying to call an image in another folder say project/images/image.jpg
then the code you should be using is
background-image:url("../images/background.jpg");
Related
I'm trying to create a Blazor component that I keep in a separate DLL.
Easy stuff: just a div with an image.
The image is being kept in the formentioned separate DLL, in a folder structure that looks something like wwwroot\ComponentName\logo.png.
Then in the ComponentName.razor.css file I try to call it:
.logo {
background-image: url('../wwwroot/ComponentName/logo.png');
width: 200px;
height: 200px;
}
My problem is... it doesn't render when I use in the Blazor WASM website.
I believe I'm doing one thing wrong.
Either I'm using the wrong URL.
Or the image file has wrongly configured properties. And I'm not entirely sure what to pick here. I already tried with Build Action Content and Copy Always as I have with Resource. Not really sure, how the image should be treated.
Please advise.
Comment to the accepted answer
Although Neil's answer which can be found here was on point it wasn't enough.
First of all: both build actions appear to be working: Content and Embedded Resource alike. So it was not the case.
What I noticed is that when I actually put the image as an image:
<img src="./_content/ComponentLibraryName/ComponentName/logo.png" />
It actually works. What is different?
What Neil pointed out: _content folder, not wwwroot. What I consider unclear in the linked documentation was the correct folder structure, and that means I had to first provide the Component Library Name, then repeat the folder structure, then provide the file name.
So I went back to the CSS version, just to check if it still works.
.logo {
background-image: url("./_content/ComponentLibraryName/ComponentName/logo.png");
width: 147px;
height: 80px;
}
Did not work. When debugging it from DevTools level I noticed that the CSS link to the image file actually pointed to https://localhost:7210/_content/ComponentLibraryName/_content/ComponentLibraryName/ComponentName/logo.png. When I removed the doubling string...
.logo {
background-image: url("./ComponentName/logo.png");
width: 147px;
height: 80px;
}
It actually worked.
I did not want to write this explanation as an answer to accept it, mostly because the only thing that changed was what was in Neil's answer anyway. I do not clearly understand anything more than this.
I think you'll need to use "_content".
Specifically, if your image is in the wwwroot folder of a dll (razor class library) called MyComponent, then I believe you'll need to reference such static files using:
background-image: url("./_content/MyComponent/logo.png");
See MS Doc
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.
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
I have created a basic MVC3 site and have added image paths into the site.css file (part of the original template).
When I run the application through dev studio the site looks OK and the images are displayed.
When I build my installer and deploy the site onto my server the images aren't displayed.
Here is a sample of my css file:
#CustomerLogo
{
position: relative;
margin-left:auto;
margin-right: auto;
width: 300px;
height: 96px;
background-image: url(/Content/themes/base/images/CustomerLogo.jpg);
background-repeat: no-repeat;
background-position: center;
background-color: rgb(41,139,178);
}
Besides ensuring that the images are actually loaded on the server, you may want to check whether the application on the server is actually running at the root directory /. For example, if your site is located at facebook.com/myGreatApp by prefixing your url with / you are telling the browser to look for images at facebook.com/Content/... which is the root rather than at facebook.com/myGreatApp/Content/...
As some other posters have mentioned, the fix for this would be to determine what the actual path from your css to those images is and to use that. A relative path would serve this perfectly and which relative option to use depends on where the css is located in relationship to the images.
Seems like issue with deploying your site to virtual directory. Anyways, you should include images relative to css file, not to application. Try
background-image: url(themes/base/images/CustomerLogo.jpg);
Have you tried a relative path? Assuming your css file resides in ~/Content/themes/base, this should work:
background-image: url(images/CustomerLogo.jpg);
You may need a .. to assist in finding the Content folder,
Example:
background-image: url(../Content/themes/base/images/CustomerLogo.jpg);
Are you sure that the URL is working? If you try to access the URL directly through the address bar, do you see the image?
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")