Background image above header

I’ve searched and searched and haven’t been able to find a solution to this. I’m using Pagelines free theme and I can’t figure out how to get my background image to cover the margin above my header. My site: https://newverselessons.com/

I want the space with the purple stripe to be background image. Thanks for any help! In case it helps, here’s all my custom css:

p { font-size: 14.5px; }

#menu-nav a:hover { background-color: #53618a !important; }

.main_nav li a { background-color: #12122e; }

.current_page_ancestor a, .children { background-color:#3d4a73 !important; }

div.scolumn-pad { background-color: #2A2A3A; }

h5 { font-style: italic; }

.wpcf7-form p input, .wpcf7-form p textarea { background-color: #ffffff; }

#page-canvas{width: 920px; background-color: #12122e; }

body #page{margin-top: 50px !important;}