CSS Background Color Not Showing

Tags: css,html5

Problem :

I have an HTML5 page built and the image is over-riding the background color in the entire page. I am trying to make the image show up in the background, while the background color shows up in the page that is on top of the background. Copy and paste my code to see for yourself. How do I fix this? Thank you in advance.

This is the index file:

<!DOCTYPE html>
<html lang="en">

    <link rel="stylesheet" href="javajam.css">
    <title>JavaJam Coffee House</title>
    <meta charset="utf-8">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

<div id="wrapper">

<h1><img src="javalogo.gif" alt="JavaJam Logo" width="619" height="117"></h1>

<div id="nav">
    <a href="index.html">Home</a>&nbsp;
    <a href="menu.html">Menu</a>&nbsp;
    <a href="music.html">Music</a>&nbsp;
    <a href="jobs.html">Jobs</a>

<div id="content">

<img src="windingroad.jpg" alt="Winding Road" width="333" height="156" align="right">

    <li>Specialty Coffee and Tea</li>
    <li>Bagels, Muffins, and Organic Snacks</li>
    <li>Music and Poetry Readings</li>
    <li>Open Mic Night</li>

    12312 Main Street<br>
    Mountain Home, CA 93923<br>

<div id="footer">
    Copyright &copy; 2013 JavaJam Coffee House<br>
    <a href="mailto:zhawkins9468@gmail.com">zhawkins9468@gmail.com</a>

And this is the CSS:

body { background-color: #FFFFCC;
      color: #330000;
      font-family: Verdana, Arial, sans-serif; 
      background-image: url(background.gif); }

h1 { background-color: #CCAA66;
    color: #000000;
    text-align: center; }

h2 { background-color: #CCAA66;
    font-size: 1.2em;
    padding-left: 10px;
    padding-bottom: 5px; }

img { border: none; }

#nav { text-align: center; }

#footer { background-color: #CCAA66;
         color: #000000;
         font-size: .60em;
         font-style: italic;
         text-align: center; 
         padding: 10px; }

#wrapper { background-color: ffffcc;
           width: 80%;
           margin-left: auto;
           margin-right: auto; 
           min-width: 700px; 
           -webkit-box-shadow: 5px 5px 5px #1e1e1e; 
           -moz-box-shadow: 5px 5px 5px #1e1e1e;
           box-shadow: 5px 5px 5px #1e1e1e; }

#content { padding: 25px; }

.details { padding-left: 20%; 
           padding-right: 20%; }

Solution :

In the code you provided, Chrome's Inspector reports "ffffcc" as an invalid property value for background-color in the div #wrapper.

Adding the "#" in front of "ffffcc" makes the background-color valid, which would cause it to display correctly instead of the body background-image. Sorry if that doesn't fix the problem, but it's worth a try just in case.

    CSS Howto..

    How to remove extra space after a colon in CSS with Sublime Text 2?

    How can I style the current (today's date) in bold font?

    How do I use a sprite background image to display once on an element (no-repeat)?

    CSS: Is there a limit on how many classes an HTML element can have?

    How do I remove the white spaces around my dashboard header on reactjs

    How to show an arrow down symbol with CSS

    How do I set image src based on li active status?

    How to Get Multiple elements to change color on hover CSS?

    How to get resultant HTML after executing all scripts?

    How to output CSS counter from Sass mixin

    CSS/JS: How do I copy the edge pixels and repeat them

    How to adjust responsive behaviour of menu bar's elements

    CSS: how to style a div so that it has no effect

    How to create a CSS? [closed]

    How to place two divs next to each other -HTML/CSS

    how to restrict the children element inside the parent element in css?

    How to animate selection / deselection in ace editor?

    How can I force browsers to print background images in CSS?

    how to go bottom of a website like back to top using javascript?

    How to make css style on Google custom search engine

    How to change CSS where id=array(index)?

    How generate width html element to fill rest of width window

    how to fit text inside a HTML div

    css responsive background image not showing

    How to apply IE11 specific css [closed]

    How to create a CSS only (vertical) drop-down menu?

    How can I fix left menu in bootstrap 3.0? [closed]

    How to segment a circle with different colors using CSS

    How to use CSS hover inside html-tag?

    How to apply different styles based on the number oif col in a table