CSS External Sheet not working but it works when i use inline CSS

Question

I have a very strange problem.

I wrote a HTML page and it uses an external CSS style-sheet. The background image property is not working when it's on the external style-sheet, but when i use internal style-sheet it works. What's causing that to happen? All the CSS properties I applied are working.

HTML Code:

<!DOCTYPE html>
<html lang="en"> 
    <head>
        <title> Burger and Chips </title>
        <link rel="stylesheet" type="text/css" href="css/style.css"/> <!-- CSS Section-->
        <style type="text/css">
            body{
                background-color:#34b0bf;
                font-family:Tahoma; 
                background-image:url('images/line.png');
                background-position:top;
                background-repeat:repeat-x;
                background-attachment:fixed;
                }
        </style>
    </head>
    <body> <!-- The Content Section-->
        <table class="center">
            <tr>
            <td><img src='images/240px-Wikimedia-logo.png' alt=''/></td>
            <td><h1> Wikimedia Logo </h1>
            <td><img src='images/240px-Wikimedia-logo.png' alt=''/></td>
            </tr>
        </table>
        <h1 class="pgtitle"> Best burgers in Leicester !! </h1>
        <br>
        <br>
        <br>        
        <div class='center' id='container'>
                <div id="menubutton" class="auto-style1">
                    <a class='button' href='page2.html'>Page 2</a>
                    <a class='button' href='page3.html'>Page 3</a>
                </div>
            <img class='left' src='images/inkjet-printer.png' width ='150' height= '150' alt=''>
            <p class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed bibendum ipsum, eu tristique magna. Etiam ac tortor dictum,
                semper libero vel, posuere metus. Proin sit amet urna diam. Vivamus turpis enim, maximus vitae consequat id, mollis eu justo. Interdum et 
                malesuada fames ac ante ipsum primis in faucibus. Donec placerat nisi quis feugiat accumsan. Pellentesque sed purus tempor tellus euismod 
                ultrices. Praesent condimentum erat ante, commodo finibus orci condimentum vitae. Cras vel nisl ullamcorper ligula egestas elementum id nec nibh.
                Nulla quis turpis in purus dignissim tincidunt. Vivamus commodo non eros quis sollicitudin. Sed vestibulum, metus vel fringilla aliquam, tellus 
                libero imperdiet nunc, quis pretium neque lacus volutpat turpis. Proin quis arcu arcu. Vestibulum ante ipsum primis in faucibus orci luctus et 
                ultrices posuere cubilia Curae</p>

        </div>
    </body>
    <!-- Made by Mahamed Ali-->
</html>

Here is the CSS stylesheet i used above:

 /* My CSS Stylesheet 
    Mahamed Ali
 */

a.button {
    border:3px solid #ccff33 ;
    padding:3px 10px 3px 10px;
    background-color:#ffffff;
    color:#990000;
    margin:10px;
    font-family:Tahoma;
    }

a.button:hover{
    background-color:#990000;
    color:#000033;
    }

body{
    background-color:#34b0bf;
    font-family:Tahoma; 
    background-image:url('images/line.png');
    background-position:top;
    background-repeat:repeat-x;
    background-attachment:fixed;
    }

#container {
    width:800px; 
    border:2px solid black; 
    margin-left:auto;
    margin-right:auto;
    padding:10px;
    background-color:#005A31;
    }

.center{
    margin-left:auto; 
    margin-right:auto;
    }

div.dcenter{
    width: 300px;
    height: 0px;
    margin: auto;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    }

h1.pgtitle{ 
    font-family:Tahoma; 
    color:#ffff00;
    text-align:center;
    }

img.left{
    float:left;
    margin-right:10px;
    }

img.right{
    float:right;
    margin-right:10px;
    }

marquee{
    font-family:Tahoma;
    color:#ffff00;
    width:50%;
    }

#menubutton{
    margin-left:auto; 
    margin-right:auto;
    }

p{
    font-family:Tahoma;
    color:#00FF00;
    }

table{
    padding:10px;
    border:1px;
    }

td {
    padding: 15px;
    }

.auto-style1 {
    text-align: center;
    }

.auto-style2 {
    border: 10px solid #000000;
    }

Hidden Hobbes Hidden Hobbes · Accepted Answer · 2014-09-23T08:13:19

The url to the image is relative to the CSS file, as the file is in the css directory you would need to change:

background-image:url('images/line.png');

to

background-image:url('../images/line.png');

CSS External Sheet not working but it works when i use inline CSS

1 Answers