I created an external css file but the background image is not displaying. I validated the file and it says there is no error and other elements are still applied, so I am not sure what i did wrong. Any solution?
Here is the code:
body {
background-image: url(../images/wordwall.jpg);
}
Usually problems like this are caused by a wrong filepath. The file path here has to be relative to the CSS file, so your filepath would work if the stylesheet is an a folder which is at the same level as the images folder. If that's not the case, you need to change it, otherwise your CSS file might not be referenced correctly.
This most likely has to do with the file path, try checking again and make sure all spellings are correct.
PS: '.. /' takes you one step backward from the file you're working on.
Related
A picture is worth a thousand words so here it is;
Picture, I am confuesed
I do not know why it does not link up with my css file I have created, it is exact file path!
Can anyone please help me, I want to style my handlebars and I cannot!
Thanks
anything that starts with ./ is a relative path. It's relative to the current file path. As the error suggests, it is therefore looking for a styles folder inside views/layouts.
Use either
styles/styles.css
or
../../styles/styles.css
enter image description here
I am trying to make a full page background image when the site loads. The problem is, none of the images i tried wont' load.
I checked my code syntax, checked the image format, checked my path to image folder, everything seems to be fine but images still won't load.
CSS:
.header-nav-menu{
background-image: url("../project/full.jpg");
}
I am not getting any error messages so I can't figure out where is the problem.
Try referencing the image at root level. Like this:
.header-nav-menu{
background-image: url("/project/full.jpg");
}
You should also be able to check the file path with your code editor, if it redirects to the image then the path is good and syntax are good. Check if you uploaded your img correctly to the server if you are using one, otherwise put it directly at the root as said below, it can't be messing for a lot of possibilities.
You should try your browser's development tools to investigate. (F12 on Chrome). You can see if the image section is present in the page. Try using a full path, rather than a relative one to see if that gives you anything. Also it could be a permissions issue where the folder containing the images is not accessible.
.header-nav-menu {
background-image: url('full.jpg');
}
Read up on pathing: Difference between Relative path and absolute path in javascript
I am trying to load an image locally onto my html. I first tried serving an image path through a /images/ folder, but that did not work. I then tried serving images with the whole path to the image like <img src="/Users/code/src/code/go/src/websites/website/website-Bucket.png" alt="test"> but I still had no luck. I checked my html and it has no errors. I have restarted my PC, changed the image to .jpg, and it still did not want to work. I get an error in Safari - An error occurred while trying to load the resource and the image shows as a blue box and question mark. What things would you try to troubleshoot?
Extra - I am using goLang to serve the files. I have it so a http.handleFunc() goes off and serves the images folder when it is requested. The path is showing http://localhost/images/theImage.png "the correct path" but nothing happens. So, I save the image and it shows it as a html and shows a section of the page?? Would that be a path thing?
In first instance you have to understand the path source, when you are on a HTML file, your path inside the file should be :
<img src="images/website-Bucket.png" alt="test">
that's because :
the path of your .html file can access trough files the inside path with the "/folder/file" structure route in the html file, so your structure files should be:
yourfiel.html (your file render on browser) /imagesfolder
-website-Bucket.png" (you call it on your html as
/imagesfolder/website/Bucket.png)./
you can learn more about paths here :
http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
Looks like it may be a file path issue.
Take a look at this page it has a good example.
https://www.w3schools.com/html/html_filepaths.asp
Also try renaming the image with a _ and not use the -.
Open Console in any browser and see if you see any errors that mention not being able to find the source path of the picture.
It should give you a hint of where your browser is trying to find that img.
All of your guy's responses were correct. I had the correct path. It was a Golang thing. I did not make a handlefunc when the server wants the /image.png. It was never serving the image, it just was doing nothing with it. Thank you for the responses.
Can anyone please help.
I am refreshing my knowledge of HTML and CSS (its been 4 years since I worked with these languages) and I am having trouble referencing images in a folder structure that I have. The enclosed image shows the folder structure that I have for my project.
What I want to do is from my index.css file in my CSS folder, use the following line of code to access an image, Logo 1.png, from my Images folder to use as a background.
body
{
background-color: #FFFEF0;
background-image: url(./Images/Logo 1.png);
}
However, this does not seem to work, I see no image. I have also tried ../Images/Logo 1.png, but again this doesn't work either.
From my index.html I can get an image to display from the Images folder by using ./Images/Logo 1.png (note ../ vs ./)
Am I going about this the right way or not? I did some digging on Google about referencing relative paths but there werent any great examples up.
Can anyone please tell me where I am going wrong with this?
If your URL includes spaces, you should really enclose the reference in quotes, also replace the space character with %20:
background-image: url('../Images/Logo%201.png');
Add 2 dots, to go up one level in folders, so if you have your images in one folder and then your css in another you'd need to go up one level and then in to your images folder eg:
background-image: url(../Images/Logo 1.png);
You might also get issues with using a space in the file name, try using an underscore instead :-)
If you use image in css, you need put source file related to css file, so if your structure is like:
index.html
css
style.css
images
background.jpg
your css should be like:
background: url(../images/background.jpg);
Also dont use spaces in file name.
use the .. to go up one level in the directory
quote the url (optional, however advisable for best crossbrowser support)
don't use spaces, try underscores instead
good practice for simplifying things: folders and files lowercase, that way you don't have to remember if the case
background-image: url("../images/logo_1.png");
Two issues, first the stuff with the url should be in quotes like this
background-image: url("../Image/Logo 1.png");
Second a single dot referrers to the current directory that the css file is located in, so when you used "./Image/Logo 1.png" it tried to find a folder called image within the CSS folder. You need to use double dots ("..") in order to go up a level within the file directory. That should fix it, assuming that your html correctly includes the css file.
I'm sure there is a very simple explanation for this but... How do I add a background image to my Joomla site? I am using a modified version of Atomic. The obvious thing to do would be to simply go into the template.css file and add a background-image property to my body or divs... however, it doesn't take. If I change the background color however that works fine. Perhaps the path is incorrect but I've tried it a hundred times and I doubt I'd get the path wrong every time. I've even tried placing the image file in the root folder, thus eliminating the possible mistyped path to the file.
Any ideas?
Thanks.
Editing the template CSS file is definitely the way to do it. This should help -
Folder to put image in:
JOOMLA FOLDER/templates/atomic/images
CSS to use:
#ID.class{background:URL(../images/background.png);}
If that doesn't work, post a link so we can debug for you.