CMS Development

BMcDaniel
Member

Text Over Images

Hello,

 

Is there an easy way to place text over images? I read a couple of articles about doing it in the rich text module. Please help!!

1 Reply 1
Jsum
Key Advisor

Text Over Images

@BMcDaniel,

 

There are a couple of ways.

 

1. background images

 

2. absolute position

 

Honestly, background images are the easiest and in most cases the best way. 

 

You can add a background image to your rich text module, or a group wrapper wrapping your rich text module.

 

You can make this image editable as well. If you don't want it to be editable than you can simply add a custom class to the element in your template you want the background image on, then apply a background in your stylesheet, which is very simple:

.element_custom_class {
    background: url(image_url.jpg) center center no-repeat;
    background-size: cover;
}

If you want it to be editable then you can use some HubL in the inline css section of the options for the element you want to apply the background image to. You will want to be weary of quotations (Hubspot applies double quotes around inline css so only use single quotes in your inline css). Here is an example of what you would put in the inline css field:

background: url({{ image_src 'bg_img' label='background', src='image_url.jpg', no-wrapper=true }}) center center no-repeat; background-size: cover;

where "image_url.jpg" would be you default image. this would allow the image to be changed on the page level like any other module's content.