CODEWITHSUNDEEP
htmlcss
stack over
stack over

Reputation: 55

DIV Image not being displayed

I think the path is correct for the background image, because that same path worked in the HTTML but I could be wrong. Basically, the image is not being displayed. Does anyone know why?

HTML

<head>
<title>2013 YourFantasyFootball</title>
<link rel="stylesheet" type="text/css" href="css/css_reset.css" />
<link rel="stylesheet" type="text/css" href="css/mystyles.css" />
</head>

<body>
<div class="container">
<!--<img src="images/final2.gif" class="stretch" alt="" />-->
<p>This is the first paragraph in the body of your new HTML file!</p>
</div>
</body>
</html>

CSS

body {
    /*width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; */
    /*z-index: -1;*/ /* Ensure div tag stays behind content; -999 might work, too. */

    background-color:black;
}

.container {
    background-image:url('images/final2.gif');
    width:900px;
    height:2000px;
    margin-left:auto;
    margin-right:auto;
}

Upvotes: 0

Views: 95

Answers (2)

musefan
musefan

Reputation: 48415

The problem is because you are using a relative URL, so the path is relative to the file it is contained within.

In the first example that path is relative to the HTML file, so it can find the images folders. However, in your second example the path is relative to your CSS file, and because that is in a subfolder (css) it cannot find the images folder.

This should work:

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

Using ../ specifies the parent folder. Which is where your html file is, and more importantly, where the "images" folder is located.

Upvotes: 0

Mohammad Areeb Siddiqui
Mohammad Areeb Siddiqui

Reputation: 10179

Use "../" to go back one directory and select the file as your CSS file is another folder.

So try this:

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

../ in your CSS file means that go back one directory so then it will go to your root folder then it will look for the images folder then find the final2.gif and then your image will be displayed. It works in your HTML because you HTML file is already in the root folder so it doesn't need to go back one directory, it just directly finds out the images folder.

And as @Lee Meador said:

So the URL in HTML is relative to the path of the HTML file and the URL in the CSS file is relative to the path of the CSS file.

That's absolutely correct.

Upvotes: 5

Related Questions