Here is the code I have in one book that uses a graphic as the chapter number and there is a subtitle under it.
Code:
<body>
<h2 class="chapterNumber"><img src="../Images/image00078.jpeg" alt="image"/></h2>
<p class="chapterDateline">F<small>LORIDA</small> S<small>TRAITS</small>, I<small>NTERNATIONAL</small> W<small>ATERS</small></p>
Code:
body {
widows: 0;
orphans: 0;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
font-size: 92.5%
}
p {
display: block;
font-family: "MinionPro";
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
text-indent: 1.2em
}
.chapterNumber {
color: #9A9A9A;
display: block;
font-family: "FuturaStd";
font-size: 1.29412em;
font-weight: bold;
line-height: 1.2;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
margin-top: 1em;
text-align: center;
text-indent: 0
}
.chapterDateline {
display: block;
font-family: "FuturaStd";
font-size: 1em;
margin-bottom: 2%;
margin-left: 0;
margin-right: 0;
margin-top: 0;
text-align: center;
text-indent: 0
}
small {
font-size: .7em
}
.chapternumber is also used when there is text instead of a graphic. Also, you can see there I have no for a page-break. This is because I have each section/chapter in a separate XML file.