CMS Development

luisaprimo
Member

2 Different background images

Hello,

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.

 

Does anyone have an alternative way? Thanks!

0 Upvotes
6 Replies 6
SRasmussen8
Participant

2 Different background images

Anton -- awesome. Thanks for responding so quickly!

 

Just out of curiosity, would the non-optimized way of doing it just in <style></style> work, too?

 

Cheers,

Sean

0 Upvotes
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

2 Different background images

Your welcome!

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.

Anton Bujanowski Signature
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

2 Different background images

Hi @luisaprimo,

You can place your @media CSS part into the HTML+hubl Part of the module. By doing so you can do something like

. background-image-container{
background-image:url({{module.background-image-1.href}};
}

@media screen and (max-width:YOUR-MAX-WIDTH){
. background-image-container{
background-image:url({{module.background-image-2.href}};
}
}

Best,
Anton
Anton Bujanowski Signature
SRasmussen8
Participant

2 Different background images

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!

0 Upvotes
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

2 Different background images

Hi @SRasmussen8

 

thank you for your insight!

Yeah, that's true. 

 

A new and optimized version would look like this:

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>

 

 

 

 

 

best, 

Anton 

Anton Bujanowski Signature
SRasmussen8
Participant

2 Different background images

Awesome -- thanks for your help!

0 Upvotes