CODEWITHSUNDEEP
htmlcss
yasmikash
yasmikash

Reputation: 157

Background image doesn't show within the <div> element - CSS/HTML

screenshot of the directory structure I created a <div> element and I'm going to use below css style withing the <div> element.

#girls {
    background-image: url("girl.gif");
}

Here is my HTML <div> element (This element contains in index.html page):

        <div id="girls">
            <p>
            <b>Girls chat:</b> 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>
        </div>

But when I load index page, the background image (girl.gif) doesn't show up. Anyone can help me with this?

Upvotes: 0

Views: 79

Answers (2)

shubh14896
shubh14896

Reputation: 156

<!DOCTYPE html>
<html>
<head>
    <title>GIF DEMO</title>
</head>
<style type="text/css">
#girls {
    background-image: url('demo.gif');
    height: 200px;
    width: 50%;
}
</style>
<body>
    <div id="girls">Sample Text
    </div>
</body>
</html>

If you are using external CSS then Change your directory path of the image & try again. else Inline Stlying go with the sample code image link https://s-media-cache-ak0.pinimg.com/originals/25/81/28/258128ed71595efc9b561ed7d88b89f2.gif

Upvotes: 2

Carl Binalla
Carl Binalla

Reputation: 5401

Try this:

#girls {
    background-image: url("../girl.gif");
}

I'm guessing that the css is inside that stylesheet folder, that's why you need to go up a level to access girl.gif, thus the usage of ../

Upvotes: 3

Related Questions