php - How to avoid inline css in dynamic wordpress style? -

i'm developing wordpress theme allows client upload own header background image. don't want image load mobile users. here what's working me right now:

<div class="header" style="     @media (min-width: 676px) {          background-image: linear-gradient(to right, rgba(1, 1, 1, 0.7), rgba(1, 1, 1, 0.1) 35%),          url('<?php header_image(); ?>');      } "> 

this works, it's lot of inline styling. there way avoid having inline css? here's method tried didn't work:

function header_image_style() {      $header_image = header_image();      return "<style type='text/css'>                 .header{                     background-image:                      linear-gradient(to right, rgba(1, 1, 1, 0.7), rgba(1, 1, 1, 0.1) 35%),                      url('".$header_image."');                 }             </style>"; } 

this method outputs $header_image url page when header_image_style(); called, , ignores other css. best-practice method achieve i'm doing?

check function wp_is_mobile detecting on 95% devices. have experience it. me works fine