-2

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.

halfer
  • 19,824
  • 17
  • 99
  • 186
KardosJ
  • 11
  • 6
  • 1
    Your code is syntactically correct. Have you confirmed that your image is in a folder called `project`, which is a sibling of the index? Have you ensured that the image is uploaded the the server? And have you ensured your element has the class `header-nav-menu`? Have you tried clearing the cache with `CTRL` + `SHIFT` + `R`? Finally, have you ensured that there are no rules that override that (with greater specificity)? – Obsidian Age Aug 26 '19 at 21:41
  • @ObsidianAge Thank You for your reply, and yes, I checked everything, the path to the directory, class name litterally everything. I also tried to make a folder inside my project folder called images and then tried to add it as background but nothing happens.... – KardosJ Aug 26 '19 at 22:09
  • Is this just a basic HTML/CSS website you're building from scratch? Or are you using a framework/CMS. If none of the suggested paths are working I would be exploring the possibility of a permission issue. – James Allen Aug 26 '19 at 22:28
  • @FAKETAXI Yes, I started from scratch. – KardosJ Aug 26 '19 at 22:36
  • @KardosJ do me a favor, take a screenshot of your folder structure and add it to your question. Also, what is the URL you're using to view the website in your browser? – James Allen Aug 26 '19 at 22:38
  • @FAKETAXI I am sorry but could You tell me how to attach a screenshot? I am quite new to Stack so I don't really now how to do that. The URL is file:///C:/Users/Rampage/Desktop/project/project.html – KardosJ Aug 26 '19 at 22:47
  • @KardosJ click Edit under your post. In the editor for the Body field there is a photo icon, click that and upload a photo. – James Allen Aug 26 '19 at 22:52
  • @FAKETAXI I attached it – KardosJ Aug 26 '19 at 22:59
  • Answered below. The reason other suggestions didn't work is because people assumed a) you had a css and img folder for your assets. Or b) you were using a local dev server (like XAMPP) – James Allen Aug 26 '19 at 23:08

4 Answers4

0

Try referencing the image at root level. Like this:

.header-nav-menu{
        background-image: url("/project/full.jpg");
    }
David Grace
  • 141
  • 4
  • Already tried, nothing happens. I tried with root and with relative paths. In both cases the result is the same.. – KardosJ Aug 26 '19 at 22:13
0

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.

StefanSpeterDev
  • 137
  • 16
  • As you said, I just checked the path ( I don't know if i have done it correctly but I am using sublime text 3 so I just right-clicked on it and copied the file path and pasted it into the editor) , it is fine, it is showing the folder named project where all my project files are.. – KardosJ Aug 26 '19 at 22:19
0

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.

Paul McCarthy
  • 818
  • 9
  • 24
  • Okay so, I tried the inspect element as You suggested and there is absolutely nothing there except the head and body tags. I made a div inside my body tag and it is visible but there is nothing inside the div itself though.. – KardosJ Aug 26 '19 at 22:12
  • so can you put your background-image code in the body tag? – Paul McCarthy Aug 27 '19 at 11:10
0
.header-nav-menu {
  background-image: url('full.jpg');
}

Read up on pathing: Difference between Relative path and absolute path in javascript

James Allen
  • 969
  • 4
  • 16