CODEWITHSUNDEEP
csshtmlweb
user962206
user962206

Reputation: 16117

HTML and CSS Background-image is not showing up

I already double checked my URL, and the name of the files, but I can't seem to get the image to show up. Why is it like that? Here's my code (take note the <p> is inside the body tags, I didn't add the full code, I only added the head and the specific problem).

<html>
  <head>
     <title>Head First Lounge.</title>
      <link type="text/css" 
            rel="stylesheet" 
            href="stylesheet/style.css" 
            media="screen"/>
  </head>


<p class = "guarantee">
     Our guarantee: at the lounge, we're committed to providing you, 
     our guest, with an exceptional experience every time you visit.
     Whether you're just stopping by to check in on email over an 
     elixir, or are here for an out-of-the-ordinary dinner, you'll 
     find our knowledgeable service staff pay attention to every detail. 
     If you're not fully satisfied, have a Blueberry Bliss Elixir on us.
</p>

And here's the CSS rule for that part

.guarantee{         
        background-image: url(images/background.gif);
        font-family: "Geogia", "Times New Roman", Times, serif;
        border-color: black;
        border-width: 1px;
        border-style: solid;
        background-color: #a7cece;
            padding: 25px;
            margin: 30px;
            line-height: 1.9em;
            font-style: italic;
            color: #444;
}

Upvotes: 12

Views: 95238

Answers (6)

Harley Borgais
Harley Borgais

Reputation: 1

FYI This page just helped me figure out the solution to my problem, where I was viewing an html page in my Chrome browser and the main.css was not loading the background image, and THE REASON WAS, because the 'relative link' in the main.css had a / at the beginning, and as someone said above, that goes to the ROOT folder, which on my Windows OS is of course C:, but on the server it is the root for that site which DOES work! So I had to remove that initial / at the beginning of the /images/backgroundimage.jpg link and then it DID work on windows. Now lets see if it works on my server without that slash...YUP!

So it DOES work with or without the / at the beginning of /images/backgroundimage.jpg in my css on this server, but on Windows the / brings it to the root c:\ drive. And btw I used "inspect" in the Browser and the "Console" at the bottom to see the link C:\images... that it was looking for, then found this page with this answer, that beginning / brings it to the ROOT folder.

Upvotes: 0

Emc_tgn15
Emc_tgn15

Reputation: 151

I know this answer is a bit late but this link will give you a detailed explanation for css file paths.

/ returns to the root directory
../ moves one directory backwards
../../ moves two directory backwards

https://css-tricks.com/quick-reminder-about-file-paths/

Upvotes: 0

Seth
Seth

Reputation: 11

I was having this same problem solved it by adding / to the beginning of the image url

(example: background-image: url(/images/background.gif);)

Hope this helps :)

Upvotes: 0

Sai Dubbaka
Sai Dubbaka

Reputation: 621

May be you've used backward slashes (\) instead of forward slashes (/) in the image path.

I did this mistake and was fighting with my chrome browser. I copied the image path from Windows Explorer (which uses backward slashes)

Upvotes: -1

KingCronus
KingCronus

Reputation: 4519

The browser will be searching for the image within your stylesheet directory at the moment.

Might be worth trying changing

background-image: url(images/background.gif);

to

background-image: url(/images/background.gif);

which might be the cause of the problem.

Upvotes: 2

Drew
Drew

Reputation: 6862

Try this:

background-image: url(../images/background.gif);

Without the ../ it is looking for an images folder inside your stylesheet folder which does not exist. So you have to go back a directory where the images folder is located.

Edit: You can also shorten up your CSS styles like so:

.guarantee{
    background: #a7cece url(../images/background.gif);
    border: 1px solid black;
}

Upvotes: 37

Related Questions