If I follow you correctly, you're essentially wanting to have more control over the background image in CSS, but need to be able to allow the user control on the backend to define it.
In that case I would do something simple in the header.php
<head>
like,
<style>
.background {
background-image: url("<?php echo $background ?>");
}
</style>
in the CSS file you can govern the rest of the control of the element.
Here's a real-world example of what I did today on a site.
In my head:
<style>
.background {
background-image:url(<?php the_field('background_image')?>);
}
</style>
My HTML:
<div class="background">
Content goes here
</div>
My CSS:
.background {
background-size: cover;
background-position: center center;
height: 600px;
}
@media only screen and (max-width: 40em){
.background {
height: 400px;
}
}
If you're attempting to define a GLOBAL variable, then you put this above your variable:
<?php global $background; ?>
Then you can use $background on any other page (but if it's being used in the header, then it's already accessible on other pages since that's a template part).