CSS Background Color Not Displaying Correctly

My HTML5 page has an issue where the image is taking over the background color of the entire page. I want to adjust it so that the image appears in the background, while the background color shows up behind the content on top. Check out my code below and let me know how to resolve this. Thank you for your help!

Here is the index file:

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

<head>
    <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">
</head>

<body>
<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>

<div id="content">

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

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

<div>
    12312 Main Street<br>
    Mountain Home, CA 93923<br>
    1-888-555-5555
</div>

<br>
</div>
<div id="footer">
    Copyright &copy; 2013 JavaJam Coffee House<br>
    <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5dfcdc4d2cecccbd69c91939de5c2c8c4ccc98bc6cac8">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f15070e180406011c565b59572f08020e0603410c0002">[email protected]</a></a>
</div>
</div>
</body>
</html>

This is the CSS used:

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%; }
csshtml

Answer №1

According to Chrome's Inspector, the code you provided has an issue with the "ffffcc" value for background-color in the div #wrapper.

To make the background-color valid, try adding a "#" in front of "ffffcc". This modification should fix the display issue and prevent the body background-image from showing instead. Give it a go and see if it resolves the problem.

Answer №2

After reviewing your code, I noticed a small error. The original line reads:

#container { color: 333344; }

The correct version should be:

#container { color: #333344; }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CKEditor is removing tags and attributes when formatting HTML emails

I have developed an application that enables users to import HTML emails and make adjustments before forwarding them. I am attempting to utilize CKEditor for modifying the imported email; however, it appears to be removing bgcolor tags (and possibly more). ...

htmlckeditorhtml-email

Swapping one div for another, all the while incorporating a limited number of buttons within the webpage

I'm faced with a dilemma on my HTML page. In the middle of the content, there's a div that contains 4 links with images and text inside. What I'm looking to achieve is for each link to trigger a complete change in the div when clicked, with ...

javascripthtmlcss

Unable to transition slides in AngularJS on Safari iOS 9 due to malfunctions

Having some CSS classes that smoothly slide my ng-view left and right during route change, everything was working well on most browsers and phones until now. Under ios 9, the animation is not functioning properly. Instead of sliding left to right, the view ...

ioscssangularjsmobile-safariios9

Displaying array elements on a webpage using JavaScript in HTML

Looking to display multiple blocks in HTML using a JavaScript array. The array contains names such as: var name=['amit','mayank','jatin'];. I need to repeat a certain portion of code in order to show the elements of the array, ...

javascripthtmlcssarrays

Using jQuery to select the next table cell vertically

Is there a way to utilize jQuery to access the cell (td) directly below a given cell in a traditional grid-layout HTML table (where each cell spans only one row and column)? I understand that the code below will assign nextCell to the cell immediately to ...

javascriptjqueryhtml

Is it possible to categorize elements for focus and onblur events?

In my search feature, I have implemented an autocomplete div that appears when the user types in a search field. The issue I am facing is that I want the div to disappear when the user clicks outside of it. Here is what I have attempted: //SHOW THE DIV WH ...

javascriptjqueryhtmlcss

Learn how to utilize interpolation within an *ngIf statement in Angular 2 in order to access local template

Consider the following scenario; <div *ngFor="item of items; let i = index;"> <div *ngIf="variable{{i}}">show if variable{{i}} is true</div> </div> Suppose I have variables named "variable0", "variable1",... Is there a way to ac ...

javascripthtmlangular

the text input remains fixed in size and does not resize

Visit the page and scroll down to find a section located next to the "Directions" button that contains an input field. This input field allows you to enter an address and utilize Google Maps for navigation. One puzzling aspect is that regardless of what ...

htmlcssinput

Arrange two internal divs on top of one another with the option to maintain the float

While searching for a solution to my issue, I noticed that most responses involved removing the float property. However, since I am new to CSS, I would like to explore using float and see if it's the best approach. Here is the fiddle I've been w ...

htmlcss

Text positioned beneath a toggle switch in html that overlaps

Is there a way to fix the issue of the label on the left side overlapping below the selector switch on my website? I want to ensure that both labels are perfectly distributed on each side of the switch. Here is the code snippet: <div class="ro ...

htmlbootstrap-4

PHP Pear Mail HTML Edition

Despite being able to successfully send emails with text content, I'm facing difficulties in sending HTML emails. The authentication is turned off and Google Apps authenticates based on the server's IP address. $message = 'Blah blah blah&ap ...

phphtmlemailpear

What is the best way to remove top divs without causing the bottom divs to shift upwards?

I am faced with a scenario where I must remove the topmost divs in a document without altering the user's view. Essentially, I need to transition from: ---------start of document div1 div2 div3 ---------start of window div4 div5 ------- ...

javascriptjqueryhtml

Is there a way to utilize a single function on two separate div elements?

Looking for a way to optimize my code that contains the addRow() and deleteRow() functions. Currently, I have duplicated these functions for both radio buttons and checkboxes. Is there a more efficient way to achieve this? function addRow(tableID) { ...

javascriptjqueryhtml

Retrieve the data from an input field in Selenium automation

Despite the text being visible in the input Text Box, I am encountering difficulties capturing it from the html DOM. I attempted to use getAttribute('value'), however, since the value attribute is not present, this method proved unsuccessful. Sim ...

htmlseleniumxpath

An easy way to create a hover effect on a URL link and dynamically change the

Is there a way to achieve the following? When hovering over various links, the image on the right changes. If no hover occurs, the default image will be displayed. https://i.stack.imgur.com/QXPXt.png ...

htmlcss

How can one determine the most accurate box-shadow values?

I am trying to extract the precise box-shadow parameters from a CSS style rule generated by the server. My main focus is determining whether the element actually displays a visible shadow or not. There are instances where the shadow rule is set as somethi ...

javascriptcss

Is there a way to prevent my table from surpassing the width of my card using CSS?

My table inside a card is not responsive on small screens, causing it to go outside the card. I've tried various solutions like using flex on the parent element and setting the table width equal to the card but nothing seems to work. The card should a ...

cssbootstrap-4

Using a custom function, automatically initiate audio playback when an Android WebView JS loads

I have a unique JS function specifically designed for the audio tag, which also controls the progress bar. It works perfectly when I click on the associated tag <a onclick="playSound(1)">. However, if I try to initiate it on page load, the function s ...

javascripthtmlaudio

Is it possible to place a div and a heading side by side within the same line?

Is there a way to align a div and header on the same line? Currently, the red div is displaying below the text. Thank you for your help! .underlined { border-bottom: 1px dotted #000; text-decoration:none; } .block { height:15px; background-color: #ff505 ...

htmlcss

The significance of the "$=" or "?=" symbols in lit-element illustrations

I'm struggling to comprehend the purpose of ?= or $= in these two instances: First Example: Lit-Element README <div id="box" class$="${this.uppercase ? 'uppercase' : ''}"> <slot>Hello World</slot> </div> ...

javascripthtmlweb-componentlit-element