Background not displaying - html

Question

The background on this page isn't displaying and instead just shows the image i have set behind the background. Also I tried centering my table using the methods posted on other threads, but none of them worked for this specifically.
/*
Winter, Edwards, and Boyd style sheet
Filename: styles.css
Author: Justus Self
Date: 4/27/2017
Long giant project
*/
/* reset styles */
html {
font-size: 16px;
}
a, article, audio, body, div, figcaption, figure, footer, header, h1,
h2, h3, img, li, nav, p, section, source, ul, video {
border: 0;
padding: 0;
margin: 0;
}
img, video {
max-width: 100%;
height: auto;
width: auto;
}
ul {
list-style-type: none;
}
/* document-wide styles */
body {
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
}
p {
line-height: 1.4em;
font-size: 1.3em;
}
a:link {
color: black;
}
a:visited {
color: #888;
}
/* skip navigation link */
p.skipnavigation a {
position: absolute;
left: -10000px;
}
p.skipnavigation a:focus {
color: ivory;
background-color: #34180f;
top: 0.4em;
left: auto;
right: 0.4em;
z-index: 2;
}
/* header section */
h1 {
text-align: center;
font-family: Bitter, "Times New Roman", Times, serif;
font-weight: 700;
color: ivory;
background-color: white;
font-size: 2.4em;
}
/* site navigation bar */
nav {
color: #34180f;
text-align: center;
background-color: #B8944D;
}
nav li {
margin: 0.3em 0.5em;
display: inline-block;
font-size: 1.3em;
line-height: 1.4em;
}
nav a:link {
text-decoration: none;
color: #744f42;
}
nav a:visited {
color: #744f42;
}
nav a:hover, nav a:focus {
color: ivory;
}
nav ul, nav div, nav iframe {
display: inline-block;
vertical-align: middle;
}
#AboutUs:hover {
color: ivory;
cursor: pointer;
}
#AboutUs {
color: #744f42;
}
/* main content */
article {
margin: 0 auto;
padding: 1.4em;
background: #7eccec;
background: url("images/bg.jpg");
}
article div {
max-width: 854px;
margin: 0 auto;
padding: 0 3% 1em;
background-color: ivory;
overflow: auto;
}
article div.welcome {
padding-top: 2em;
}
article div figure {
float: left;
padding-right: 2%;
padding-bottom: 2%
margin-top: 20px;
}
.container {
min-width: 600px;
max-width: 800px;
margin: 0 auto;
padding: 0 3% 0;
background-color: darkblue;
overflow: auto;
}
h2 {
padding: 0.4em;
text-align: left;
font-family: Bitter, "Times New Roman", Times, serif;
font-size: 2em;
font-weight: 700;
}
h3 {
margin: 1.4em 0 0;
font-size: 1.6em;
font-family: Bitter, "Times New Roman", Times, serif;
font-weight: 700;
clear: both;
}
h3 iframe.iframes{
border: none;
}
section p {
margin: 1em 0;
}
article figure {
max-width: 100%;
margin-left: 2em;
float: right;
}
article figcaption {
text-align: center;
}
.Bookkeeping {
clear: right;
float: left;
width: 60%;
}
.Testimonial1 {
border: 2px solid black;
background-color: white;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
position: relative;
top: 6em;
}
.Testimonial{
border: 2px solid black;
background-color: white;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
position: relative;
top: 6em;
}
.History {
clear: left;
float: right;
width: 47%;
}
.Olddude {
border-radius: 5px;
border: 1em solid #B8944D;
margin: 1em;
position: relative;
top: 10em;
}
.nonprofit1 {
width: 60%;
clear: left;
float: right;
}
.nonprofit {
margin: 1em;
float: left;
position: relative;
}
/* form styles */
form {
padding: 10px;
}
/* fieldsset styles */
fieldset {
margin-bottom: 0.8em;
}
fieldset fieldset {
margin-top: 1em;
padding: 0.8em;
border: 1px solid #777;
}
/* field styles */
.contactinfo input, #stay-nights, textarea {
border: 1px solid #ccc;
padding: 0.2em;
font-size: 1em;
}
select {
margin-bottom: 0.6em;
}
.contactinfo input {
position: absolute;
left: 5em;
}
.schedule input {
position: absolute;
left: 10em;
}
#nameinput, #emailinput {
width: 25em;
}
#phoneinput {
width: 12em;
}
#stay-nights {
width: 3em;
}
#submit {
border: none;
padding: 0.4em 0.6em;
background-color: #e3d5ba;
font-size: 1.25em;
border-radius: 10px;
}
/* main content table */
th, td {
border: 1px solid black;
padding: 0.5em;
}
th {
background-color: lightblue;
}
.email {
background-color: ivory;
}
.name {
background-color: pink;
}
.degree {
background-color: orange;
}
/* Main Content CSS Table */
.table {
margin: 1em 0;
font-size: 1.3em;
display: table;
}
.row {
display: table-row;
}
.row div {
padding: 0.25em 0.5em;
display: table-cell;
}
.day {
font-weight: bold;
}
/* label styles */
label {
font-size: 1em;
line-height: 1.6em;
}
.contactinfo label {
display: block;
position: relative;
margin: 0.8em 0;
}
.services label, .method label {
margin-right: 1.6em;
}
.schedule p{
width: 9.2em;
float: left;
}
.date-picker label {
position: absolute;
left: -10000px;
}
/* footer section */
footer {
padding: 0.6em;
background-color: darkblue;
color: ivory;
text-align: center;
}
.copyright {
text-align: center;
font-size: .8em;
color: white;
}
/* print styles */
#media print {
body, h1, article, footer {
color: rgb(0,0,0);
background: rgb(255,255,255);
}
body {
max-width: 100%;
}
nav {
display: none;
}
}
#page {
margin: 0.75in;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>WEB Managing Partners</title>
<!--
Winter, Edwards, and Boyd (WEB) main web page
Filename: index.html
Author: Justus Self
Date: 5/2/2017
A Giant Project that makes me really sad
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="modernizr.custom.40753.js"></script>
<link href='http://fonts.googleapis.com/css?family=Bitter:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="images/favicon.ico">
</head>
<body>
<div class="container">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<p class="skipnavigation">Skip navigation</p>
<header>
<h1><img src="images/W.E.B.png" width="501" height="299" alt="Winter, Edwards, & Boyd"></h1>
</header>
<nav class="sitenavigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Contact</li>
</ul>
<ul>
<li>Managing Partners</li>
<li>Company History</li>
<li>Community Involvement</li>
</ul>
<div class="fb-like" data-href="https://facebook.com/cengagebrain"
data-layout="button" data-action="like" data-size="small" data-show-faces="true"
data-share="false">
</div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
Tweet<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</nav>
<article id="contentstart">
<h2>Managing Partners</h2>
<h3>Our employees may be contacted using the e-mails shown below</h3>
<br>
<table>
<colgroup>
<col class="name">
<col class="email">
<col class="degree">
</colgroup>
<thead>
<tr>
<th>Employee Name</th>
<th>E-mail</th>
<th>Degree</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mike Edwards</td>
<td>medwards#webcpa.com</td>
<td>Certified Public Accountant</td>
</tr>
<tr>
<td>Julia Winters</td>
<td>jwinter#webcpa.com</td>
<td>Certified Financial Planner</td>
<tr>
<td>Regina Boyd</td>
<td>rboyd#webcpa.com</td>
<td> Certified Public Accountant </td>
</tr>
</tbody>
</table>
<br>
<br>
<footer>
<nav class="sitenavigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<p class="copyright">ⒸJustus Self</p>
<p class="copyright"> CIS 130 – SP16</p>
</footer>
</article>
</div>
</body>
</html>

Answer 1

background property needs height and (max-)width just use the values you want and you are good to go.
/*
Winter, Edwards, and Boyd style sheet
Filename: styles.css
Author: Justus Self
Date: 4/27/2017
Long giant project
*/
/* reset styles */
html {
font-size: 16px;
}
a,
article,
audio,
body,
div,
figcaption,
figure,
footer,
header,
h1,
h2,
h3,
img,
li,
nav,
p,
section,
source,
ul,
video {
border: 0;
padding: 0;
margin: 0;
}
img,
video {
max-width: 100%;
height: auto;
width: auto;
}
ul {
list-style-type: none;
}
/* document-wide styles */
body {
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
}
p {
line-height: 1.4em;
font-size: 1.3em;
}
a:link {
color: black;
}
a:visited {
color: #888;
}
/* skip navigation link */
p.skipnavigation a {
position: absolute;
left: -10000px;
}
p.skipnavigation a:focus {
color: ivory;
background-color: #34180f;
top: 0.4em;
left: auto;
right: 0.4em;
z-index: 2;
}
/* header section */
h1 {
text-align: center;
font-family: Bitter, "Times New Roman", Times, serif;
font-weight: 700;
color: ivory;
background-color: white;
font-size: 2.4em;
}
/* TABLE CENTER*/
table { margin:auto}
/* site navigation bar */
nav {
color: #34180f;
text-align: center;
background-color: #B8944D;
}
nav li {
margin: 0.3em 0.5em;
display: inline-block;
font-size: 1.3em;
line-height: 1.4em;
}
nav a:link {
text-decoration: none;
color: #744f42;
}
nav a:visited {
color: #744f42;
}
nav a:hover,
nav a:focus {
color: ivory;
}
nav ul,
nav div,
nav iframe {
display: inline-block;
vertical-align: middle;
}
#AboutUs:hover {
color: ivory;
cursor: pointer;
}
#AboutUs {
color: #744f42;
}
/* main content */
article {
margin: 0 auto;
padding: 1.4em;
}
article div {
max-width: 854px;
margin: 0 auto;
padding: 0 3% 1em;
background-color: ivory;
overflow: auto;
}
article div.welcome {
padding-top: 2em;
}
article div figure {
float: left;
padding-right: 2%;
padding-bottom: 2% margin-top: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 0 3% 0;
background: url("http://lorempixel.com/1600/900") no-repeat 0 0 / cover;
height: 100vh;
max-width: 100%;
overflow: auto;
}
h2 {
padding: 0.4em;
text-align: left;
font-family: Bitter, "Times New Roman", Times, serif;
font-size: 2em;
font-weight: 700;
}
h3 {
margin: 1.4em 0 0;
font-size: 1.6em;
font-family: Bitter, "Times New Roman", Times, serif;
font-weight: 700;
clear: both;
}
h3 iframe.iframes {
border: none;
}
section p {
margin: 1em 0;
}
article figure {
max-width: 100%;
margin-left: 2em;
float: right;
}
article figcaption {
text-align: center;
}
.Bookkeeping {
clear: right;
float: left;
width: 60%;
}
.Testimonial1 {
border: 2px solid black;
background-color: white;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
position: relative;
top: 6em;
}
.Testimonial {
border: 2px solid black;
background-color: white;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
position: relative;
top: 6em;
}
.History {
clear: left;
float: right;
width: 47%;
}
.Olddude {
border-radius: 5px;
border: 1em solid #B8944D;
margin: 1em;
position: relative;
top: 10em;
}
.nonprofit1 {
width: 60%;
clear: left;
float: right;
}
.nonprofit {
margin: 1em;
float: left;
position: relative;
}
/* form styles */
form {
padding: 10px;
}
/* fieldsset styles */
fieldset {
margin-bottom: 0.8em;
}
fieldset fieldset {
margin-top: 1em;
padding: 0.8em;
border: 1px solid #777;
}
/* field styles */
.contactinfo input,
#stay-nights,
textarea {
border: 1px solid #ccc;
padding: 0.2em;
font-size: 1em;
}
select {
margin-bottom: 0.6em;
}
.contactinfo input {
position: absolute;
left: 5em;
}
.schedule input {
position: absolute;
left: 10em;
}
#nameinput,
#emailinput {
width: 25em;
}
#phoneinput {
width: 12em;
}
#stay-nights {
width: 3em;
}
#submit {
border: none;
padding: 0.4em 0.6em;
background-color: #e3d5ba;
font-size: 1.25em;
border-radius: 10px;
}
/* main content table */
th,
td {
border: 1px solid black;
padding: 0.5em;
}
th {
background-color: lightblue;
}
.email {
background-color: ivory;
}
.name {
background-color: pink;
}
.degree {
background-color: orange;
}
/* Main Content CSS Table */
.table {
margin: 1em auto;
font-size: 1.3em;
display: table;
}
.row {
display: table-row;
}
.row div {
padding: 0.25em 0.5em;
display: table-cell;
}
.day {
font-weight: bold;
}
/* label styles */
label {
font-size: 1em;
line-height: 1.6em;
}
.contactinfo label {
display: block;
position: relative;
margin: 0.8em 0;
}
.services label,
.method label {
margin-right: 1.6em;
}
.schedule p {
width: 9.2em;
float: left;
}
.date-picker label {
position: absolute;
left: -10000px;
}
/* footer section */
footer {
padding: 0.6em;
background-color: darkblue;
color: ivory;
text-align: center;
}
.copyright {
text-align: center;
font-size: .8em;
color: white;
}
/* print styles */
#media print {
body,
h1,
article,
footer {
color: rgb(0, 0, 0);
background: rgb(255, 255, 255);
}
body {
max-width: 100%;
}
nav {
display: none;
}
}
#page {
margin: 0.75in;
}
<body>
<div class="container">
<p class="skipnavigation">Skip navigation</p>
<header>
<h1>
<img src="images/W.E.B.png" width="501" height="299" alt="Winter, Edwards, & Boyd">
</h1>
</header>
<nav class="sitenavigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Contact</li>
</ul>
<ul>
<li>Managing Partners</li>
<li>Company History</li>
<li>Community Involvement</li>
</ul>
</nav>
<article id="contentstart">
<h2>Managing Partners</h2>
<h3>Our employees may be contacted using the e-mails shown below</h3>
<br>
<table>
<colgroup>
<col class="name">
<col class="email">
<col class="degree">
</colgroup>
<thead>
<tr>
<th>Employee Name</th>
<th>E-mail</th>
<th>Degree</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mike Edwards</td>
<td>medwards#webcpa.com</td>
<td>Certified Public Accountant</td>
</tr>
<tr>
<td>Julia Winters</td>
<td>jwinter#webcpa.com</td>
<td>Certified Financial Planner</td>
<tr>
<td>Regina Boyd</td>
<td>rboyd#webcpa.com</td>
<td> Certified Public Accountant </td>
</tr>
</tbody>
</table>
<br>
<br>
<footer>
<nav class="sitenavigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<p class="copyright">ⒸJustus Self</p>
<p class="copyright"> CIS 130 – SP16</p>
</footer>
</article>
</div>