Hi - below is the code we use for 2 entirely different certificates. For various reasons, each certificate have different fields entered by the system versus what is included in the code. @murphy_1527 custom certificate catalog certificate #certificates
<style>
.div1{
background-image: url("URL TO IMAGE");
background-size: 1024px 750px;
background-repeat: no-repeat;
border: none;
height: 750px;
box-sizing: border-box;
padding: 100px 20px 0;
font-family: san serif;
text-align:center;
font-weight:bold;
font-size: 2em;}
h1,h2,h3,h4,h5{margin:0 0 0.25em;}
h2 { font: italic bold;}
body,html{padding:0;margin:0;}
</style>
<div class="div1">
<br /><br /><br />
<h4>awards this certificate of completion in:</h4><br />
<h2>ENTER COURSE TITLE</h2>
<h4>to</h4>
<h3>{{student_name}}</h3>
<h5>Certification Hours: 1</h5>
<h5>{{completion_date}}</h5>
</div>
<p style="page-break-after: always;"> </p>
<p style="page-break-before: always;"> </p>
<style>
.container{
background-image: url("URL TO IMAGE ");
background-size: 1024px 750px;
background-repeat: no-repeat;
border: none;
width: 1024px;
height: 750px;
box-sizing: border-box;
padding: 100px 20px 0;
font-family: san serif;
text-align:center;
font-weight:bold;
font-size: 2em;}
h1,h2,h3,h4,h5{margin:0 0 0.25em;}
h2 { font: italic bold; font-size: .75em}
body,html{padding:0;margin:0;}
</style>
<div class="container">
<br /><br /><br />
<div style="display:block; margin-top: 220px;"><h2>{{student_name}} on {{completion_date}}</h2>
</div>
</div>