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

Upvotes: 0

Views: 21437

Answers (4)

Monday A Victor
Monday A Victor

Reputation: 471

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

Upvotes: 0

MAK
MAK

Reputation: 775

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

Upvotes: 0

khollenbeck
khollenbeck

Reputation: 16157

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.

Upvotes: 1

rgthree
rgthree

Reputation: 7273

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.

Upvotes: 4

Related Questions