HTML and CSS Background-image is not showing up

Question

I already double checked my URL, and the name of the files, but I can't seem to get the image showing up. why is it like that? here's my code Take note the

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 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>        Our guarantee: at the lounge, we're committed to providing you,

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

Your code is working for me. See jsfiddle.net/EU8uR. But, I would suggest when you specify background image, you should add "background-position", "background-repeat" as well. — Grace Huang, Commented Jan 12, 2012 at 18:12

rgthree · Accepted Answer · 2012-01-12 18:25:53Z

4

Your CSS looks fine.

Your problem lies in the URL itself. You probably mean:

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

Since you're using relative paths and your stylesheet is in "stylesheet/" directory, your code has the browser looking for "stylesheet/images/background.gif" as it's relative to the stylesheet, not the document.

answered Jan 12, 2012 at 18:25

rgthree

7,28319 silver badges21 bronze badges

Add a comment |

khollenbeck · Accepted Answer · 2012-01-12 18:27:18Z

1

Try ../ before your URL. Also if you inspect the background-property in firebug you should be able to tell if is actually finding the URL.

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

If that deosn't work try setting a width and height and display block.

answered Jan 12, 2012 at 18:27

khollenbeck

16.2k18 gold badges68 silver badges102 bronze badges

Add a comment |

MAK · Accepted Answer · 2012-04-28 06:45:52Z

0

mention the height and width to the width so that the background image will appear.

answered Apr 28, 2012 at 6:45

MAK

7754 gold badges9 silver badges31 bronze badges

Add a comment |

Monday A Victor · Accepted Answer · 2017-06-23 01:28:16Z

0

Check to make sure the path you are using in the 'url' function is correct then use 'background-size' property to reduce the size of the image since over-sized images always has that side effect and the probably use 'background-position:cover' to spread the image in its con

answered Jun 23, 2017 at 1:28

Monday A Victor

4717 silver badges16 bronze badges

Add a comment |

Collectives™ on Stack Overflow

HTML and CSS Background-image is not showing up

4 Answers 4

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Your Answer

Sign up or log in

Post as a guest

Related