Search code examples
htmlcssinline-codebackground-size

Use background-size on background applied via inline CSS

I'm applying a background with an inline style because it needs updated with PHP:

<div style="background:url(img.jpg)">
    test
</div>

At a certain breakpoint, I need to apply background-size:contain;

@media screen and (max-width: 600px) {
    div {
        background-size:contain;
    }
}

Edit- It seems that CSS from a stylesheet does not apply when combined with inline CSS in this case. Is there a solution for that?

Here's a simple jsFiddle -> http://jsfiddle.net/z5r1hwmq/

Solution

  • You can try by adding !important, for example 

    background-size:contain!important;

    However, this is not the best option. It changes the size, but it would be better if you had real structure that you're using so you can get needed element via parent elements and would be able to do this without adding "!important".