variable inside @media screen

[Rose]

Hi, 

I need to use "@media screen" to display different background image sizes. I was able to reproduce the correct output by using this code with wagtail tags:

<style>

    {% image block.value width-1450 as carouselimagedata %}

    @media screen and (min-width:1450px){

    .img { background:url('{{ MEDIA_URL }}{{ carouselimagedata.url }}') no-repeat center center; background-size: cover;}

    }

    {% image block.value width-1200 as carouselimagedata %}

    @media screen and (min-width:1200px){

    .img { background:url('{{ MEDIA_URL }}{{ carouselimagedata.url }}') no-repeat center center; background-size: cover;}

    } .......

</style>

output:

<style>

    

    @media screen and (min-width:1450px){

    .img { background:url('/media/images/albergo_DPbX2EO.width-1450.jpg') no-repeat center center; background-size: cover;}

    }

    

    @media screen and (min-width:1200px){

    .img { background:url('/media/images/albergo_DPbX2EO.width-1200.jpg') no-repeat center center; background-size: cover;}

    }

    

    @media screen and (min-width:992px){

    .img { background:url('/media/images/albergo_DPbX2EO.width-992.jpg')  no-repeat center center; background-size: cover;}

    }

    

    @media screen and (min-width:768px){

    .img { background:url('/media/images/albergo_DPbX2EO.width-800.jpg')  no-repeat center center; background-size: cover;}

    }

    

    @media screen and (min-width:767px){

    .img { background:url('/media/images/albergo_DPbX2EO.width-550.jpg')  no-repeat center center; background-size: cover;}

    }

</style>

I can see background image but it doesn't change in responsive layout view. It always seems to pick up the last image size, in my case 550.jpg. 

Any ideas?

Thx, 

Rose

[stefania...@abinsula.com]

Actually It works, but there was somethin wrong in media query sizes.

thx

Rose

[Peter of the Norse]

You also need a max-width or this will always be true.

On Mar 11, 2016, at 2:21 AM, Rose <stefan...@gmail.com> wrote:

    @media screen and (min-width:767px){

Peter of the Norse

Rahm...@Radio1190.org