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