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 set z-index in css background

    How to disable button using jquery in materialize css

    How to override group of css class?

    How can I style XML with CSS for viewing in a browser without first transforming to (X)HTML?

    How to set different table widths using CSS or jQuery?

    How to implement fade in effect for CSS checkbox

    How to add a hiding delay to Full CSS Dropdown Vertical Menu

    How to CSS a two column list of items?

    how to position a css sprite as background for another class

    How to render a template with dynamic CSS?

    Unsure of how to wrangle my javascript dependencies

    How to create a layout with 2 menu bars in css?

    how to make div fixed at a particular scroll level

    How get dimension of HTML shadow element via JavaScript

    How do I make the text in the next line to be centered and not aligned to the left?

    How to get CSS background images to show up in HTML files opened by Word?

    How to add html special character (right-arrow) using content property of css? [duplicate]

    How to perform --include-css when using the Jekyll stylus plugin

    How to move a span after an img?

    How to change height of ui-grid row?

    How to set background color for a boxed link?

    How to remove curved line in HTML/CSS

    how to animate .jpg image with CSS?

    How to center my a div in a table using CSS?

    How can I get .less compiler support in Visual Studio 2012 Release 2?

    Selecting the first-child with a given class, how? [duplicate]

    How quora put that image on their home page? [closed]

    How to find elements and siblings within a tree

    How to create a table inner bevel in HTML/CSS?

    How can I use Javascript to allow navigation between sections using keyboard shortcuts?