Jump to content
Isaac19

background-image not working

Recommended Posts

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;  }
 

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

The correct path would be:

body {
  background-image: url ("../images/Art 1.jpg");
}

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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,

 

 

Screen Shot 2019-12-03 at 4.07.39 PM.png

Edited by Isaac19

Share this post


Link to post
Share on other sites

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");
}

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.:o

<!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");
}

 

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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? 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...