I’m not a coder at all, so I’ve been having some difficultly. I am working on a landing page for a contact us form. I have it set up to where there are two flexible columns in a group: one text column and one column for the form. I would like to set the same background image behind the two modules, but I’m not sure how to add a background image to them.
Hi @MRay,
first question: why do you use flex-columns if you have “static” content(left text, right image)? A custom module(see idea below) with this options would make much more sense and your life much easier 
Do you want to change the background-image frequently, set it up once or do you use this template on multiple pages and do you want to change the background-image depending on the page or maybe even based on smart-rules?
Set it up once(very easy):
- add a class to the wrapping group. E.g. “lp-background-image-wrapper”
- Open your CSS file (if you don’t know which one it is - it should be linked in the right sidebar of the template)
- go to the very bottom and add
.lp-background-image-wrapper{
background-image:url('path-to-your-image'); {# paste the link to your image here #}
background-size:cover {# set the image to the size of the div #}
background-position: center center; {# positions the image in the center of your screen #}
width:100vw; {# optional; set the wrapping div to display-width #}
height:100vh; {# optional; set the wrapping div to display-height #}
overflow:hidden {# hides scrolling bars#}
padding:50px 0; {# change the numbers to your default padding or insert a hubl if you have one for default padding #}
}
- you should consider to add some media-queries for mobile displays
Multipage usage:
nearly the same as above. The only difference is that you have to check for the unique body class of the certain page and modify the CSS(see above) as follows. You can do this for every page you want
body.*unique-class* .lp-background-image-wrapper{
background-image:url('path-to-your-image'); {# paste the link to your image here #}
background-size:cover {# set the image to the size of the div #}
background-position: center center; {# positions the image in the center of your screen #}
width:100vw; {# optional; set the wrapping div to display-width #}
height:100vh; {# optional; set the wrapping div to display-height #}
overflow:hidden {# hides scrolling bars#}
padding:50px 0; {# change the numbers to your default padding or insert a hubl if you have one for default padding #}
}
If you want more flexibility:
Write a custom module and replace the flex columns. A basic layout(for HubSpot default bootstrap2 layout) could be:
{# module begin #}
<div class="lp-background-image-wrapper" style="background-image:url('{{just-the-image-src-hubl}}');background-position:center center;background-size:cover">
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
{# Insert your Rich-text function here#}
</div>
<div class="span4">
{# Insert your Image here #}
</div>
</div>
</div>
</div>
{# module end #}
Add at least these 3 functions to your module:
- Image(will be your background image)
- Rich-text(your rich-text)
- Image(the image besides the text)
Style the module how you want to in your CSS file(I don’t recomend to use the CSS part of the module)
If you want you can even make the module “smart” by creating multiple boolean functions, number fields and what ever you can think of. I like to create things like “do you want to reposition the image?” because often the customer wants to change the position of the image on desktop, mobile and tablet.
If you want to do so I recomend you to plan a little bit more like grouping functions in the module so it will be easier to handle the module.
As I do this kind of modules nearly once a week here’s a (very) advanced inspiration:
{# configuration begin #}
<style>
.lp-background-image-wrapper{
background-position:center center;
background-size:cover;
}
{% if module.configuration.mobile_settings%}
@media screen and (max-width:480px){
.lp-background-image-wrapper{
{% if module.configuration.mobile_image %}
background-image:url('{{module.configuration.mobile_image.src}}');
{% endif %}
{% if module.configuration.mobile_position%}
background-position: {{ module.configuration.mobile_image_vertical_postion}}% {{ module.configuration.mobile_image_horizontal_postion}}%
{% endif %}
}
}
{% endif %}
{% if module.configuration.tablet_settings%}
@media screen and (min-width:481px) and (max-width:1024px){
.lp-background-image-wrapper{
{% if module.configuration.tablet_image %}
background-image:url('{{module.configuration.tablet_image.src}}');
{% endif %}
{% if module.configuration.mobile_position%}
background-position: {{ module.configuration.tablet_image_vertical_postion}}% {{ module.configuration.tablet_image_horizontal_postion}}%
{% endif %}
}
}
{% endif %}
@media screen and (min-width:1025px){
.lp-background-image-wrapper{
background-image:url('{{module.configuration.display_image.src}}');}
</style>
{# configuration end #}
{# module begin #}
<div class="lp-background-image-wrapper">
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
{# Insert your Rich-text function here#}
</div>
<div class="span4">
{# Insert your Image here #}
</div>
</div>
</div>
</div>
{# module end #}
hope this helps,
best,
Anton