CODEWITHSUNDEEP
cssbanner
Deadulus
Deadulus

Reputation: 321

Banner not displaying CSS

I have the following code to display a banner in my CSS stylesheet. 

#banner {
    background-image: url(../Images/banner.png); 
    background-repeat: no-repeat;
    background-size: cover; 
    border: 5px solid #dedede;
    height: 200px;
}

The banner is not displaying. Instead I get a small white cube in the top left hand corner.

The full CSS style sheet is:

body {
    font-family: lucida grande,tahoma,verdana,arial,sans-serif;
    background-color: #e9e9e9;
}

body p {
    font-size: 0.8em;
    line-height: 1.28;
}

#wrapper {
    width: 1080px;
    background-color: #fff;
    margin: 0 auto;
    padding: 10px;
    border: 5px solid #dedede;
}

#banner {
    background-image: url(../Images/banner.png); 
    background-repeat: no-repeat;
    background-size: cover; 
    border: 5px solid #dedede;
    height: 200px;
}

#content_area {
    float: left;
    width: 750px;
    margin: 20px 0 20px 0;
    padding: 10px;
}

#sidebar {
    clear: right;
    width: 250px;
    height: 400px;
    margin: 20px 10px;
    padding: 10px;
    border: 2px solid #E3E3E3;
 }

footer {
    clear: both;
    width: auto;
    height: 40px;
    padding: 10px;
    border: 3px solid #E3E3E3;
    text-align: center;
    color: #fff;
    text-shadow: 0.1em 0.1em #333;
    background-image: url(../Images/banner.jpg);
}

#navigation {
    height: 60px;
    border: 3px solid #E3E3E3;
    margin-top: 20px;
    text-shadow: 0.1em 0.1em #333;
    background-image: url(../Images/footer.jpg);
}

#nav {
    list-style: none;
}

#nav ul {
    margin: 0;
    padding: 0;
    width: auto;
    display: none;
}

#nav li {
    font-size: 24px;
    float: left;
    position: relative;
    width: 180px;
    height: 50px;
}

#nav a:link, nav a:active, nav a:visited {
    display: block;
    color: #fff;
    text-decoration: none;
}

#nav a:hover {
    color: lightblue;
}

Here is my HTML code:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title><?php echo $title; ?></title>
    <link rel="stylesheet" type="text/css" href="Styles/Stylesheet.css"/>
</head>
<body>
    <div id="wrapper">
        <div id=banner">
    </div>
    <nav id="navigation">    
         <ul id="nav">
             <li><a href="index.php">Home</a></li>   
             <li><a href="#">Books</a></li>
             <li><a href="#">Publications</a></li>    
             <li><a href="#">About Us</a></li>       
        </ul>   
    </nav>    
    <div id="content_area">
        <?php echo $content; ?>
    </div>
    <div id="sidebar"></div>
    <footer>
        <p>All rights reserved</p>
    </footer>
</body>
</html>

Upvotes: 0

Views: 929

Answers (2)

V&#237;ctor Bernab&#233; P&#233;rez
V&#237;ctor Bernab&#233; P&#233;rez

Reputation: 76

Looks like a double quotation marks error in the id attribute value

<div id=banner">

Upvotes: 1

Mohammad
Mohammad

Reputation: 675

This is what I would do: 1. Try doing background-repeat: repeat; ... see what happens. 2. right click on the small image and click view image to confirm that the image is the right one. 3. post the html for better understanding.

Upvotes: 0

Related Questions