Help making background image responsive - Hubl code

[pdr]

My HubSpot generated template has this custom Hubl code (and I am not a developer). . . I want to make my background image responsive and am familiar with the width = 100% command. I just don't know where to add it in this Hubl code. Can anyone advise me, please?

Thanks!

{% image "background_image" label='Select a background image',
src='http://cdn2.hubspot.net/hubfs/our-file-name-here.jpg',
export_to_template_context=True %}

<style>

.bg-image-section{
background-size: 100% 100%;
background:url('{{ widget_data.background_image.src }}');
}
</style>

[Jsum · Accepted solution]

@pdr,

You have 2 things going on here. The first is the module:

{% image "background_image" label='Select a background image', src='http://cdn2.hubspot.net/hubfs/our-file-name-here.jpg', export_to_template_context=True %}

It is an image module that allows you to swap the image in the page editor. Because export_to_template_context is set to true the data belonging to the module is ste free into the template to be used as apposed to this module ouputting where it sits. 

so the second thing you have is some css:

<style>
.bg-image-section{
background-size: 100% 100%;
background:url('{{ widget_data.background_image.src }}');
}
</style>

This is where you are using the src part of the image modules data. You are applying this src as the background image of an element with the class "bg-image-section".

because you are using this data token this css won't work in a style sheet, it needs to be in the template containing the image module. You can place this css in the head of your template. 

[Jsum · Accepted solution]

@pdr,

You have 2 things going on here. The first is the module:

{% image "background_image" label='Select a background image', src='http://cdn2.hubspot.net/hubfs/our-file-name-here.jpg', export_to_template_context=True %}

It is an image module that allows you to swap the image in the page editor. Because export_to_template_context is set to true the data belonging to the module is ste free into the template to be used as apposed to this module ouputting where it sits. 

so the second thing you have is some css:

<style>
.bg-image-section{
background-size: 100% 100%;
background:url('{{ widget_data.background_image.src }}');
}
</style>

This is where you are using the src part of the image modules data. You are applying this src as the background image of an element with the class "bg-image-section".

because you are using this data token this css won't work in a style sheet, it needs to be in the template containing the image module. You can place this css in the head of your template. 

[pdr]

Hi @Jsum,

Thanks so much for your reply. I must admit, I don't understand most of what you wrote <sheepish grin> but I think you're saying I should move (or copy?) this CSS to the header of the template? If so, I'm curious why the HubSpot resources that built our initial template didn't put it there to begin with (I have not added it here).  Probably not something you can answer here. 🙂

<style> .bg-image-section{ background-size: 100% 100%; background:url('{{ widget_data.background_image.src }}'); } </style>

[Jsum · Accepted solution]

Was it built by Hubspot? They are usually pretty good about following best practice.

You can place the css anywhere in your document provided it is inside of the style tags. It's just not good practice. Your css should go in a stylesheet, or in the head of your html document, or inline, in that order of preference. There have been a few occasions where I needed to place it in the body of a document and it felt dirty. 

As long as the element with that class exists in your page then the background should apply to it if your css is working.