CODEWITHSUNDEEP
htmlcssimage
jmc
jmc

Reputation: 131

Background images not appearing

I have here my codes for html and css. I dont seem to catch the problem on why my images wont load or show-up. I tried them to load both on firefox and chrome.

My problem is not on jsfiddle.

And here is my folder structure:

http://jsfiddle.net/p8eS3/1/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="description" />
        <meta name="author" content="author" />
        <link href="css/index.css" rel="stylesheet" type="text/css" />

        <title>Title</title>

    </head>

    <body>
        <div id="container">
            <div id="sidebar">
                <div id="logo"></div>
            </div>
        </div>
    </body>

</html>

@charset "utf-8";
/* Body */

#body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
    background: #ccc;
}

/* Container */

#container {
    width: 100%;
    background: #000;
}

/* Sidebar */

#sidebar {
    background: url(../img/sidebar.png) repeat-y;
    width: 40%;
    float: left;
    position: fixed;
}

/* Logo */

#logo {
    background-image: url(../img/logo.png);
}

Upvotes: 0

Views: 487

Answers (7)

anglimasS
anglimasS

Reputation: 1344

Try,

#sidebar {
    background: url(../img/sidebar.png) repeat-y;
    width: 40px;   /* your background width */
    height:60px;    /* your background height */
    float: left;
    position: fixed;
}

/* Logo */

#logo {
    background: url(../img/logo.png) 0 0 no-repeat;
    width: 40px;   /* your logo width */
    height:60px;    /* your logo height */
}

Upvotes: 0

mgabor
mgabor

Reputation: 963

You have to specify a width and a height to your #logo element so that the BG can appear.

Upvotes: 0

Spycho
Spycho

Reputation: 7788

It's because your divs don't actually take up any space, so you can't see any background. See your modified fiddle for an example of how to fix this.

Alternatively, you might want to consider using HTML img tags.

Upvotes: 0

sg3s
sg3s

Reputation: 9567

You have two images, they're added as background images for divs, but those divs do not have layout since the sidebar lacks height and the logo height and width. Which means they do not show up at all. Give them height/width to fix it.

If not the paths to the images are wrong.

Upvotes: 2

Kevin Bowersox
Kevin Bowersox

Reputation: 94499

Your path to the images is most likely off. This will be hard to debug via a js fiddle. Can you post your directory structure?

Upvotes: 0

maccard
maccard

Reputation: 1258

Could be your folder structure. Are the images in a folder the same level as your html file, or a level up. If they're the same level, try replacing ../images with ./images

Upvotes: 0

Curtis
Curtis

Reputation: 103428

The images aren't loading as jsfiddle won't recognise ../img/sidebar.png as this will look locally on their server.

I'm assuming that this is not your initial problem though, and that you are experiencing problems getting the right path on your application.

I would recommend 'rooting' your image url so that it works from the root folder to the location like:

background: url(/img/sidebar.png) repeat-y;

Upvotes: 2

Related Questions