I'm trying to make my website more responsive by having the user upload a different background image that will be used on mobile, but I'm having trouble working it out.
Both images would be submitted by the user, so I need to create the template with module fields. But those module fields don't work in css, so I can't use @media rules.
technically it would work yes. But if you put it only in a style-tag inside the module, the style-tag will be rendered somewhere in your DOM so it will look like this:
<body>
{# previous modules #}
{# start of your module #}
<style>
...
</style>
<div></div>
{# end of your module #}
{# other modules #}
beside the possible performance drop it can cause not working at all. So I always recommend to use the {% require_head %} option.
Hi Anton, this is an old thread, but I thought it might be good (for me and maybe others) to clarify the syntax for the css inside hubl. Should that be nested inside a <style></style> tag? Thanks!
If using a text field as a link-field to the image(can be external)
{% require_head %} {# this will put the CSS into the <head>-tag #}
<style>
.background-image-container{
background-size:cover;
width:100%;
min-heigt:200px; {# replace this with the min-height you wish to have #}
background-position:center center;
background-repeat:no-repeat;
overflow:hidden;
background-image:url('{{ module.background-image-1 }}');
}
@media screen and (max-width:1024px)}{ {# replace with your media-query width #}
. background-image-container{
background-image:url('{{ module.background-image-2 }}');
}
}
</style>
{% end_require_head %}
<div class="background-image-container"></div>
if working with image function:
{% require_head %} {# this will put the CSS into the <head>-tag #}
<style>
.background-image-container{
background-size:cover;
width:100%;
min-heigt:200px; {# replace this with the min-height you wish to have #}
background-position:center center;
background-repeat:no-repeat;
overflow:hidden;
background-image:url('{{ module.background-image-1.src }}');
}
@media screen and (max-width:1024px)}{ {# replace with your media-query width #}
. background-image-container{
background-image:url('{{ module.background-image-2.src }}');
}
}
</style>
{% end_require_head %}
<div class="background-image-container"></div>