Isaac19 Posted December 2, 2019 Share Posted December 2, 2019 Hello everyone, so I am working with CSS and the background image is not working. No matter what I do, it simply wont work. Here is the code. Check the bolded part. Some might say it may not be in the right folder. But I know it is because I have images in the About page and the format is the same I am using for the background-image specification: images/Art 1.jpg. My folders are formatted as such: MAIN folder. Within MAIN folder is the images folder and the css folder. Now, notice how I wrote the code within the About page: This is the code for the About page for one image. <img src="images/Art 1.jpg" alt="Hello World" width="200" height="300"> (this code worked perfectly and the image shows and/or was retrieved perfectly. So, I don't know why it isn't working in CSS Furthermore, I have tried it all with Safari and Firefox. Background-color works perfectly. This is my CSS Code p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 2em; color: #cc0000; text-indent: 5em; margin: auto; padding: auto;} body { background-image: url ("images/Art 1.jpg"); } /* Top Nav Bar*/ ul {list-style-type: none; margin: 0; padding: 0;} li {float: left;} li a {display: block; color: white; text-align: center; padding: 14px 16px; margin: 100; text-decoration: none; background-color: pink; border-radius: 0px; width: 240.7px; border: 1px solid black;} li a:hover { background-color: darkblue; color: orange;} .active {background-color: purple; color:yellow;} /* Images styling*/ div.images {width: 1680; display: block; padding: 100px; margin: 10px; } Link to comment Share on other sites More sharing options...
Ingolme Posted December 2, 2019 Share Posted December 2, 2019 URLs in external stylesheets are relative to the location of the stylesheet itself rather than the page. I can't tell if this is your problem or not since I don't know if your CSS is in an external stylesheet. 1 Link to comment Share on other sites More sharing options...
Isaac19 Posted December 3, 2019 Author Share Posted December 3, 2019 Hey Ingolme, so here is how I have arranged my folder. NameOfSite folder inside this folder are about.html contact.html products.html images folder css folder I want to re-iterated that I used the images in the about.html page and it worked just fine: <img src =“images/Art 1.jpg” alt=“Hello World” width=“200” height=“300”> was what I used within the about.html page And I wanted to just test the background-image property and this is what I used: { background-image: url ("images/Art 1.jpg"); } So I am not sure why it works within the about.html page but the same url “images/Art 1.jpg” won’t work within the CSS. Link to comment Share on other sites More sharing options...
Isaac19 Posted December 3, 2019 Author Share Posted December 3, 2019 And yes, URLs are relative to the Stylesheets’ location. I wanted to apply the background-image property to all of my pages. And yes, all the pages have the stylesheet link within them. When I use the background color property, it works fine. I just cannot figure out why the background-image property won’t work. Also, I want to reiterate that I want to apply the background-image property to the Body element. I tried going directly into the about.html’s body element and applying the background property from within, which would only affect the body of the about.html page, and it worked But done from the CStyleSheet won’t work. This is what I used for that: <body background="Art 1.jpg">. It worked perfectly. Link to comment Share on other sites More sharing options...
Isaac19 Posted December 3, 2019 Author Share Posted December 3, 2019 I am sure you guys understand that I need to distribute this property from within the styelsheet so it can go to all the pages at once. Thus, saving me time by going from page to page. Link to comment Share on other sites More sharing options...
Isaac19 Posted December 3, 2019 Author Share Posted December 3, 2019 And I already tried deleting everything in the about.html except the Nav bar. I also created a new stylesheet that contained only the background-image property and applied to the about.html page. And it still didn’t work. Ugh Link to comment Share on other sites More sharing options...
Ingolme Posted December 3, 2019 Share Posted December 3, 2019 The correct path would be: body { background-image: url ("../images/Art 1.jpg"); } Link to comment Share on other sites More sharing options...
Isaac19 Posted December 3, 2019 Author Share Posted December 3, 2019 Yes I tried that too before you mentioned that here, but it still did not work. And I just tried it again and still doesn’t work. And although w3schools says to use “images/Art 1.jpg” in its examples for the background-image property, many books say ‘images/Art 1.jpg’ and yet other books say “images/Art 1.jpg” but nothing is working. Also, my images folder is not inside the CSS folder. CSS folder which contains the stylesheet.css file, is on the same level as images folder. Thus, CSS and IMAGES are siblings, and they are children of MAIN folder. Remember I said I used images in the about.html and the path was images/Art 1.jpg. Link to comment Share on other sites More sharing options...
Ingolme Posted December 3, 2019 Share Posted December 3, 2019 The images folder is not a child of the CSS folder, this is why you have to climb out of the CSS folder to find it, by prepending "../" to the path. Assuming that you described your filesystem accurately, the path you are looking for can only be "../images/Art 1.jpg". There should not have to be any guesswork here, use the correct path and if that is not working then the issue is not with the path, it is elsewhere. Watch out that your text editor is not creating curly quotes instead of ordinary quotes. The quotes in your previous post would not work because they are curly quotes. This is what curly quotes look like ( ‘ ’ “ ”). The quotes you should be using look like this:( ' ' " "). For URLs, CSS accepts single-quotes, double-quotes or no quotes at all. Link to comment Share on other sites More sharing options...
Isaac19 Posted December 3, 2019 Author Share Posted December 3, 2019 (edited) I have exhausted all my options. I have even created a completely new website without anything in it except one image, one page, and the css file. I will attach pics here for you to see. It's still not working. And I have tried every syntax or version of background-image I can possible enter. I am attaching files here for you to see. If you see something that I am not seeing, do let me know. I truly appreciate your help as this is driving me absolutely nuts. haha, Edited December 3, 2019 by Isaac19 Link to comment Share on other sites More sharing options...
Isaac19 Posted December 3, 2019 Author Share Posted December 3, 2019 Here is the code for the only page: <!DOCTYPE html> <html> <head> <title>DUMMY SITE</title> <link rel="stylesheet" type="text/css" href="css/hello.css"> </head> <body> Hello World! </body> </html> And here is the CSS code for that page: body {background-image: url ("../Art 1.jpg"); } Link to comment Share on other sites More sharing options...
Ingolme Posted December 3, 2019 Share Posted December 3, 2019 Open the developer tools in your browser to see what it going on. In most browsers you can open them by pressing F12. Note that the body is only as tall as the content within it, so you will only see the image behind the first line of text. Link to comment Share on other sites More sharing options...
Isaac19 Posted December 3, 2019 Author Share Posted December 3, 2019 Actually I just figured out...the background-image property is simply not working. What worked, however, was simply using: body { background: url ("../images/Art 1.jpg"); } I skipped using -image. And that worked. Link to comment Share on other sites More sharing options...
Isaac19 Posted December 3, 2019 Author Share Posted December 3, 2019 And it worked for both sites, the one I am creating, and the phony one. Link to comment Share on other sites More sharing options...
Isaac19 Posted December 3, 2019 Author Share Posted December 3, 2019 Perhaps, background-image has finally been made redundant and wordy. Link to comment Share on other sites More sharing options...
Ingolme Posted December 3, 2019 Share Posted December 3, 2019 No, background-image works fine and serves a slightly different purpose than background. What I am noticing in the code that you are pasting here is that there are a lot of invisible characters which are probably interfering with your CSS code. Which text editor are you using to write your code? Link to comment Share on other sites More sharing options...
Isaac19 Posted December 4, 2019 Author Share Posted December 4, 2019 Here is the code for the DUMMY PAGE. What invisible characters are you referring to? Isn't this literally an almost empty page, devoid of any CSS except for the background-image property as well as the usual elements and the link to the style sheet within that one page? I am confused. Because even in that DUMMY page, DUMMY CSS, it just doesn't work. Also, I am using TextWrangler. In the DUMMY site, I eliminated every element except the necessary/basic ones. And in the CSS there is only one property: background-image. So, what invisible characters could there be? Ugh. <!DOCTYPE html> <html> <head> <title>DUMMY SITE</title> <link rel="stylesheet" type="text/css" href="css/hello.css"> </head> <body> Hello World! </body> </html> And here is the CSS code for that page: body {background-image: url ("../Art 1.jpg"); } Link to comment Share on other sites More sharing options...
Isaac19 Posted December 4, 2019 Author Share Posted December 4, 2019 Have you tried the code on your side? Because on my side it is just not working. It only worked when I used the background property instead of the background-image property. So, I know that the url is correct. I had been going through every choice of url syntax and nothing worked. And I'd even used everyone of the ones you had suggested before you had suggested them, and I tried again when you suggested them again, but nothing. So, it must be the background-image property...unless there is some hidden code within TextWrangler that predisposes the background-image property to not work? Just brainstorming here. Link to comment Share on other sites More sharing options...
Isaac19 Posted December 4, 2019 Author Share Posted December 4, 2019 oh and by the way, the very correct URL was the one you had suggested: body { background: url("../images/Art 1.jpg");}, which I used in the DUMMY website. I know in the above message, I didn't type it that way, but I did after and used it with just background property. Link to comment Share on other sites More sharing options...
Ingolme Posted December 4, 2019 Share Posted December 4, 2019 They're invisible, so you won't see them. They're visible in a different encoding, this is what I get when I change the invisible characters to ANSI encoding: Quote body {background-image: url ("../Art 1.jpg"); }  These segments "" are visible representations of some UTF-8 characters which are in your code. Your code editor is probably putting them in there. Link to comment Share on other sites More sharing options...
Ingolme Posted December 4, 2019 Share Posted December 4, 2019 Looks like it's a byte-order mark. https://www.fileformat.info/info/unicode/char/feff/index.htm Link to comment Share on other sites More sharing options...
Isaac19 Posted December 4, 2019 Author Share Posted December 4, 2019 Ugh, so how do I fix that? I was not aware of this. Is this because of the TextWrangler? Or is it because of the UTF-8? And I ll be frank, I wasn't putting in the UTF-8 before...I finally did it at the end, but that still didn't fix things. So, what do I do? Link to comment Share on other sites More sharing options...
Ingolme Posted December 4, 2019 Share Posted December 4, 2019 UTF-8 is a good encoding, but your text editor should be using UTF-8 without BOM (Byte-Order Mark). The option to choose with or without a BOM should be available in your code editor. Link to comment Share on other sites More sharing options...
Isaac19 Posted December 5, 2019 Author Share Posted December 5, 2019 It has been on that setting since I have been using it. The background-image property was simply not working. And why it wasn't working, I simply do not know. But seeing how sensitive code can be to the most minor of changes or missing things, I can see how everything needs to be in place. But the background-image property is now working. It's frustrating because it I was doing things right by the process of elimination, which on the same day before creating this post, I had used the right choice. I didn't understand it then, but I do now, thanks to you and more reading. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now