Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML and CSS Background-image is not showing up

Tags:

html

css

web

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;
}
like image 989
user962206 Avatar asked Jan 12 '12 16:01

user962206


1 Answers

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;
}
like image 144
Drew Avatar answered Nov 01 '22 05:11

Drew