How to avoid inline css in dynamic wordpress style?

Question

I'm developing a Wordpress theme that allows a client to upload their own header background image. But I don't want the image to load for mobile users. Here is what's working for 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, but it's a lot of inline styling. Is there a way to avoid having so much inline css? Here's another method I tried that 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 only outputs the $header_image url to the page when header_image_style(); is called, and ignores all the other css. What is the best-practice method to achieve what I'm doing?

You could use <style>...</style> in the head, and add it before the normal stylesheets. — Stickers
– Stickers, Commented Apr 9, 2015 at 19:29
Alright I tried calling header_image_style(); before any of the other normal stylesheets, but that method is still not working. It only returns the value of $header_image and ignores the <style> tag and the css within it. — jadle
– jadle, Commented Apr 9, 2015 at 19:33
This gives me an odd result. Now I'm getting the <style> tag with the css, but the url value from $header_image is omitted from the background image property, and displayed as a string above the <style> tag. Like this: http://...bg.jpg <style type="text/css"> .header{ background-image: url('');} </style> — jadle
– jadle, Commented Apr 9, 2015 at 19:44
If you have a lot of dynamically generated CSS, I would write it out to a file every time the option is saved and then enqueue that CSS file. — Mathew Tinsley
– Mathew Tinsley, Commented Apr 9, 2015 at 19:46

Dreamm · Accepted Answer · 2015-04-10 10:20:46Z

1

check this function wp_is_mobile detecting over 95% devices. Have good experience with it. As for me works fine

answered Apr 10, 2015 at 10:20

Dreamm

1418 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

johnnyd23 · Accepted Answer · 2015-04-09 20:20:26Z

0

At the very least you could clean up your inline styling by moving the media query to your external CSS file, and using a max-width query instead to disable the background image

@media (max-width: 675px) { 
    .header {
        background-image: none!important; 
    }
}

answered Apr 9, 2015 at 20:20

johnnyd23

1,6952 gold badges14 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to avoid inline css in dynamic wordpress style?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related