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
--
You received this message because you are subscribed to the Google Groups
"Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to django-users+unsubscr...@googlegroups.com.
To post to this group, send email to django-users@googlegroups.com.
Visit this group at https://groups.google.com/group/django-users.
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-users/0c119436-8f18-4cd5-9663-7edc8b10df81%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
