Background image disappears when adding class to header - html

Question

I'm having some trouble with my CSS code. I want to add a class to my header element so that I can differentiate in my stylesheet between the header for my homepage and the header for content pages. I started out with a header without a class, and everything was functioning properly. Suddenly, when I decided to add a class to my header element, the background image disappeared, and I can't figure out why.
This works:
header {
width: 100%;
height: 511px;
background: url('cakesresized.jpg') no-repeat;
margin: 10px 0px;
}
.homepgintro {
font-size: 0.9em;
position: absolute;
left: 65%;
height: 22em;
width: 22em;
background-color: rgba(181, 194, 202, 1);
padding: 7px;
color: #fff;
text-align: center;
}
.homepgintro img {
display: block;
width: 150px;
margin: 0 auto;
border-radius: 100px;
}
When the corresponding HTML is as follows:
<header class="homepg1"><h1>Shannon Loves Sweets</h1>
<div class="homepgintro">
<img src="profile.jpg">
<h2>Hi there!</h2>
<p>I'm Shannon! I'm a super busy full-time employee/part-time student who <i>loves</i> sweets and all things fried. Join me on my journey to cook at home more often, and to eat healthier while still working in some sweet treats!</p></div></header>
But THIS CSS will not work, and makes the background image disappear:
.homepg1 {
width: 100%;
height: 511px;
background: url('cakesresized.jpg') no-repeat;
margin: 10px 0px;
}
.homepgintro {
font-size: 0.9em;
position: absolute;
left: 65%;
height: 22em;
width: 22em;
background-color: rgba(181, 194, 202, 1);
padding: 7px;
color: #fff;
text-align: center;
}
.homepgintro img {
display: block;
width: 150px;
margin: 0 auto;
border-radius: 100px;
}
What's going wrong? Here is the entire CSS code for my stylesheet (the version that is currently working as expected):
/* UNIVERSAL STYLES */
#page {
max-width: 1200px;
width: 85%;
left: 7.5%;
position: relative;
margin-top: 100px;
background-color: #D9C6C1;
border-radius: 25px;
overflow: hidden;
}
body {
font-family: 'Roboto Slab', Georgia, serif;
font-size: 16px;
background-color: white;
color: #fff;
}
h1 {
font-family: 'Pacifico', cursive;
font-size: 3em;
padding: 4px;
}
h2 {
font-family: 'Sunshiney', 'Comic Sans MS', cursive;
font-size: 2em;
margin: 0;
}
section {
padding: 10px;
}
/* STELLA SAYS */
.stellasays img {
border-radius: 100%;
width: 220px;
float: right;
}
/* NAVIGATION */
nav {
background-color: white;
top: 0;
left: 0;
width: 100%;
margin-bottom: 60px;
position: fixed;
z-index: 100;
}
nav li {
display: inline-block;
padding: 7px;
margin-top: 6px;
}
nav a {
font-family: 'Pacifico', cursive;
color: #cef0de;
border-bottom: 1px solid #cef0de;
text-decoration: none;
padding: 4px;
font-size: 1.3em;
transition: color 0.4s ease-in-out 0.2s;
}
nav a:hover, nav a:focus {
color: #E9BE68;
border-bottom: 1px solid #E9BE68;
}
/* HOMEPAGE STYLES */
header {
width: 100%;
height: 511px;
background: url('cakesresized.jpg') no-repeat;
margin: 10px 0px;
}
.homepgintro {
font-size: 0.9em;
position: absolute;
left: 65%;
height: 22em;
width: 22em;
background-color: rgba(181, 194, 202, 1);
padding: 7px;
color: #fff;
text-align: center;
}
.homepgintro img {
display: block;
width: 150px;
margin: 0 auto;
border-radius: 100px;
}