If I get what you’re asking, it’s that you want a way to remove the <style> tag from your header – correct? Definitely a good idea to do this – just keep the bare minimum there. This way, styles can be managed separately to your markup – keeping the presentation layer separate is best practice.
All of your CSS you can then put into an external file, except for the actual background image URL, because that’s the dynamic part. You can insert that like this:
<div class="jumbotron" style="background-image: url('<?php echo $thumbnail_jumbo; ?>');">
Don’t forget to close your div too by inserting </div> when you’ve finished with any other markup you might want to put inside it.
The rest of the CSS isn’t dynamic, so you can stick that right in your theme’s style.css, or if you like, in a separate stylesheet that you can enqueue by placing the following in your functions.php:
add_action( 'wp_enqueue_scripts', 'wpse231142_enqueue_styles', 10 );
function wpse231142_enqueue_styles() {
wp_enqueue_style( 'my-styles', get_template_directory_uri() . '/my-styles.css' );
}
That will load up a hypothetical file called my-styles.css which would be sitting in your theme’s directory.
References:
- Including CSS & JavaScript from the Theme Developmer Handbook
- Separation: The Web Designer’s Dilemma from A List Apart (note: this is an old article, so keep that in mind while reading it as some of it may be out of date)