Text over image

SOLVE
Highlighted
New Contributor

Hi Guys, 

 

I've puzzled and read so much about Hubspot and now I just really don't understand anything anymore. I've created a landingpage, just with a simple 'image' module on top (below image & rich text and CTA), but now I want to have text on the image, just a title of the page. no idea how i can make this happen and i've tried everything that's there to find on this community and internet but every HTML and CSS class nothing works.. so i must be doing something wrong Smiley Happy 

 

Is there a simple solution for this in hubspot for dummies' language? Smiley Happy 

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Occasional Contributor

Hi @ElineTribes,

there are some different ways that will get this to work.

In my opinion the easiest(and cleanest) one would be to "write" a custom module. It's easier than it sounds Smiley Wink

 

 

Simply create a new module and give it to widgets/modules

- an image one

and

- a (rich)text one

 

the image snippet looks something like this:

 

{% if module.image_field.src %}
	<img src="{{ module.image_field.src }}" alt="{{ module.image_field.alt }}" width="{{ module.image_field.width }}" height="{{ module.image_field.height }}">
{% endif %}

 

 

and the text one something like this:

 

{% inline_text field="text_field" value="{{ module.text_field }}" %}

 

to get the image "behind" the text you should add the image snippet to an inline background-image style. Since a background-image doesn't need an alt-tag or sizes your code should look like this:

<div class="row" id="my-pretty-background-image-wrapper" style="{% if module.image_field.src %}background-image:url({ module.image_field.src }});{% endif %}">
<div class="container"> 
<div class="span12">
<div class="my-pretty-headline">
<p>{{ module.text_field }}</p>
</div>
</div>
</div> 
</div>

 

also should consider to style the image via CSS and give it a cover-size

#my-pretty-background-image-wrapper{
background-size:cover;
background-position:center center;
}

regards

Anton

 

Did my post help answer your query? Help the Community by marking it as a solution

 

Reply
0 Upvotes
2 Replies
Occasional Contributor

Hi @ElineTribes,

there are some different ways that will get this to work.

In my opinion the easiest(and cleanest) one would be to "write" a custom module. It's easier than it sounds Smiley Wink

 

 

Simply create a new module and give it to widgets/modules

- an image one

and

- a (rich)text one

 

the image snippet looks something like this:

 

{% if module.image_field.src %}
	<img src="{{ module.image_field.src }}" alt="{{ module.image_field.alt }}" width="{{ module.image_field.width }}" height="{{ module.image_field.height }}">
{% endif %}

 

 

and the text one something like this:

 

{% inline_text field="text_field" value="{{ module.text_field }}" %}

 

to get the image "behind" the text you should add the image snippet to an inline background-image style. Since a background-image doesn't need an alt-tag or sizes your code should look like this:

<div class="row" id="my-pretty-background-image-wrapper" style="{% if module.image_field.src %}background-image:url({ module.image_field.src }});{% endif %}">
<div class="container"> 
<div class="span12">
<div class="my-pretty-headline">
<p>{{ module.text_field }}</p>
</div>
</div>
</div> 
</div>

 

also should consider to style the image via CSS and give it a cover-size

#my-pretty-background-image-wrapper{
background-size:cover;
background-position:center center;
}

regards

Anton

 

Did my post help answer your query? Help the Community by marking it as a solution

 

Reply
0 Upvotes
New Contributor

Thanks AntonB! 

 

That's a great help!! 

Reply
0 Upvotes