Making Back Ground Image Full Width - css

Question

When you open www.nomadicmatt.com on mobile devices the first image you see is his big bold background image. I am trying to replicate the same thing on my site www.rosstheexplorer.com. The header image looks too small on mobile devices hence why I am exploring having a background image.
To achieve this I was told the following
You must change your markup. Change your
<img class="custom-header">
to
<div class="custom-header">
and set container background property:
.custom-header {
background: url(path_to_image) no-repeat;
background-size: cover;
}
I was also told, you can set style on div like this
<div style="background: url(<?php header_image(); ?>); background-size: cover;">
I tried inserting the following code into additional CSS
<div style="background: url(<?php header_image(); ?>); background-size: cover;"> </div> And
.custom-header { background: url("rosstheexplorer.com/cover-photo-1/") no-repeat; background-size: cover; }
I got the error message
Markup is not allowed in CSS.
I tried each line individually and there was an issue with both lines
Where do you alter the markup? Or is there another solution?
I have now been told I may have to make the changes in the index.php file, this is the code for my index.php file
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
/* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'content', get_post_format() );
?>
<?php endwhile; ?>
<?php penscratch_paging_nav(); ?>
<?php else : ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Answer 1

If I understand correctly you have tried putting html code in css file. That is you inserted
<div style="background: url(<?php header_image(); ?>); background-size: cover;"> </div>
in your css file. This is not going to work. You need to change the markup in html file that might be generated using php so you actually might need to put this markup in index.php or something.

Answer 2

Your have given padding and margin that is creating issue. Please look into attached image