topic Text over image in CMS Development

Text over image

ElineTribes — Thu, 08 Nov 2018 15:08:18 GMT

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 🙂

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

Re: Text over image

AntonB — Thu, 08 Nov 2018 16:49:04 GMT

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 😉

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

Re: Text over image

ElineTribes — Thu, 08 Nov 2018 18:50:57 GMT

Thanks AntonB!

That's a great help!!

Re: Text over image

Kew99 — Tue, 30 Aug 2022 13:52:51 GMT

I know it's a long shot because it's been a couple years but I'm having the same problem; I don't understand this part:

"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:"

Where do you put that code? I think I've made the module with text and image snippets but I don't understand what to do next. Do I make another background image module and add the code snippet for the module to the sytle field in the module editor?