How to create row with background image containing two columns with container

[suniltodkar]

Anyone can give me way to create custom module with one row with background image and in that row conatin one container with 2 columns. How it is achived in Hubspot?

[Anton]

Hi @suniltodkar

it's very easy. Just add an image widget to your module and copy the "code" from the 

<img src="">

part and insert it as the background-image url

<div class="row" style="background-image:url({{ module.image_field.src }});background-size:cover;background-position:center center">
  <div class="container">
    <div class="span6">LEFT COLUMN</div>
    <div class="span6">RIGHT COLUMN</div>
  </div>
</div>

regards,

Anton

[suniltodkar]

I have tried your solution but its not showing background image.

[Anton · Accepted solution]

Hi @suniltodkar,

sorry for the delayed response.

Here's a "quick" image tutorial for you.

1. add an image widget to the module2. copy the snippet3. add the snippet somewhere in the module and copy the img src code. delete the rest4. insert the copied code into the url brackets

you can add 

min-height:500px; /* insert your desired height here */

after

background-position:center center;

also you can give the whole thing a css class and style it better in css.

To do it with classes, change the first row

<div class="row" style="background-image:url({{ module.image_field.src }});background-size:cover;background-position:center center;">

to

<div class="row background-image-container">

(you can choose the name by your self)

after you've done this

add

<style>
.background-image-container{
background-image:url({{ module.image_field.src }});
background-size:cover;
background-position:center center;
}
</style>

above or below the html part. Add your desired CSS style to it. 

e.g.

If you want to insert H1(Headlines) inside the container and wnt to give them a custom styling you insert

.background-image-container h1{
Your H1 styling goes here
}

inside

<style>
...
</style>

there are litteraly no boundaries for this.

Because of the "support" - Unfortunatelly I don't have Skype

[suniltodkar]

Hi @Anton,

Thank you for your helping.

[suniltodkar]

Hi @Anton,

Thank you so much.

Can you give me your skype id So i can contact with you. Actually i have many doubts about hubspot design. Can you help me?

[Anton]

Hi @suniltodkar,

it's very simple.

1. add an image widget/function to the module

2. copy the "snippet"

3. insert it somewhere in the "HTML" section

4. copy only the "code" which is inside the <img src="">-tag and delete the whole other part( you won't need the alt tag and sizes because it's gonna be fullsize and a background-image)

5. write the following code(it's a simple HubSpot based layout)

<div class="row" style="background-image:url();background-size:cover;background-position:center center">
  <div class="container">
    <div class="span6">LEFT COLUMN</div>
    <div class="span6">RIGHT COLUMN</div>
  </div>
</div>

6. insert the copied code(from <img src="">) into the brackets at background-image:url(INSERT CODE HERE)

7. write your column layout inside the "container" div

You can edit the number after "span". Note: Both must be a total of 12. 

You have following options:

1-11,2-10,3-9,4-8,5-7,6-6,7-5,8-4,9-3,10-2,11-1

regards,

Anton