Coding Css for php page template

I recently wrote a php file for a promotion template page for a client website the code is as follows:

<?php
/*
Template Name: Promotion Page
*/
?>

<?php get_header(); ?>
<div class="art-sheet clearfix">
            <div class="art-layout-wrapper">
                <div class="art-content-layout">
                    <div class="art-content-layout-row">
                        <div class="art-layout-cell art-content"><article class="art-post art-article">

                <div class="art-postcontent art-postcontent-0 clearfix"><div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell" style="width: 100%" >
        <p style="text-align: center;">
			the_post_thumbnail()</p>
    </div>
    </div>
</div>
<div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell" style="width: 55%" >
        <p><?php get_sidebar('top'); ?>
			<?php

			if (have_posts()) {
				/* Start the Loop */
				while (have_posts()) {
					the_post();
					get_template_part('content', 'page');
				}
			} else {
				theme_404_content();
			}
			?>
			<?php get_sidebar('bottom'); ?></p>
    </div><div class="leather-background" style="width: 45%" >
        <p style="text-align: center;"><iframe width="400" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=CornerStone+Sports+Pub+%26+Eatery,+South+Main+Street,+Oconomowoc,+WI&aq=0&oq=cornerstone+sports&sll=44.900771,-89.56949&sspn=13.335608,28.54248&ie=UTF8&hq=&hnear=&t=m&ll=43.111436,-88.49976&spn=0.001371,0.002146&z=18&iwloc=lyrftr:m,3262774016263517484,43.110896,-88.499792&output=embed&wmode=transparent&wmode=transparent&wmode=transparent&wmode=transparent&wmode=transparent&wmode=transparent&wmode=transparent"></iframe><br></p><p style="text-align: center;"><?php echo do_shortcode('[widget id="ermm_widget-2"]'); ?><br></p>
    </div>
    </div>
</div>
<div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell" style="width: 100%" >
        <h3>Questions or COncerns</h3><p>If you need any further clarification about this event, please <a href="https://www.cornerstonesportspub.com/cornerstone/contact-us/">contact us</a>. stop in at 24 S Main St, Oconomowoc, WI 53066, or call 262.560.1368</p><p>We will see you soon.</p>
    </div>
    </div>
</div>
</div>

</article></div>
                    </div>
                </div>
            </div>
    </div>
<?php get_footer(); ?>

The portion I want to stylize is this portion:

<div class="leather-background" style="width: 45%" >
        <p style="text-align: center;"><iframe width="400" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=CornerStone+Sports+Pub+%26+Eatery,+South+Main+Street,+Oconomowoc,+WI&aq=0&oq=cornerstone+sports&sll=44.900771,-89.56949&sspn=13.335608,28.54248&ie=UTF8&hq=&hnear=&t=m&ll=43.111436,-88.49976&spn=0.001371,0.002146&z=18&iwloc=lyrftr:m,3262774016263517484,43.110896,-88.499792&output=embed&wmode=transparent&wmode=transparent&wmode=transparent&wmode=transparent&wmode=transparent&wmode=transparent&wmode=transparent"></iframe><br></p><p style="text-align: center;"><?php echo do_shortcode('[widget id="ermm_widget-2"]'); ?><br></p>
    </div>
    </div>
</div>

I created a background image that I would like to insert behind this section. The image size is 430 x 683. The div is 45% of 1000px. I would like to add some padding for text, and make sure the image is centered, and automatically re-sizes to fill the div w/out being cutoff.

I created this css code to start tinkering but nothing happened:

.leather-background{
    background-image:url("https://www.cornerstonesportspub.com/wp-content/uploads/2013/09/Leather-Background.png");
    background-size: 100%;
    padding: 10px;
}

Any help is appreciated