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
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
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)
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.
sorry i am new to CSS. I am doing a school unit where i have to create a web page using CSS based on an image design. Anyway, i finally finished and everything works great. though i found out that as a requirement for my unit i need to have my CSS file in a folder called 'styles'. so i created a new folder called 'styles', i placed my site.CSS file in there then updated my css link from:
<link href="site.css" rel="stylesheet" type="text/css">
to
<link href="styles/site.css" rel="stylesheet" type="text/css"> to cater for the new file path.
When i open the webpage every thing remains the same except for my unordered list background image does not display? everything else that is styled in the CSS file all works fine, just only the background image for my UL disappears. But when i put the CSS file back where it was originally from(same path as my Index.html file) and change the path back to it all works fine again and the background image re-appears.
What could i be doing wrong? i just can't figure out what to do.
the css code for the particular style:
#menu a {
height: 30px;
display: block;
vertical-align: middle;
text-decoration: none;
color: black;
font-size: small;
padding-top: 8px;
margin-left: 10px;
margin-right: 10px;
background-image: url('images/pg_menu_bg.png');
}
Thanks for your help, i hope this isn't a stupid question!
This is because you've changed the directory structure of your project.
When you reference a filepath in css without a slash at the start, the browser assumes you are referencing relative to where the CSS file is, so when you place the CSS file in the styles directory, it's looking for the image in:
/styles/images/pg_menu_bg.png
Where the image actually exists in:
/images/pg_menu_bg.png
This is why it works when you put the css file back in the root directory (I hope that makes sense?)
You should be able to get around this by changing your background css to:
background-image: url('../images/pg_menu_bg.png');
the ../ essentially means go up one directory from the directory the css file is located in.
It would be even better to write is as:
background-image: url('/images/pg_menu_bg.png');
The slash at the beginning tells the browser to look in the root directory, this means that regardless of where your css file is located the code should work. Unfortunately this doesn't work if you're accessing the html files on your computer (as the root of your computer is C:/)
You have to change the path of your background image also. Now your CSS file isn't in the root location anymore. So you have to use something like this -
background-image: url('../images/pg_menu_bg.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?