Header text over image

[shanshea10]

Hello,

My website is built out in wordpress and just my "blog" and "contact" page are built in hubspot. I need design help. How can I imitate the header on my wordpress page in Hubspot? I attached my header in wordpress and the header in hubspot with no text on it (I put the text below the header). Please let me know if this is possible to do in Hubspot. Thank you

[Jsum]

@shanshea10 make the image a background image to the container of the text. 

[kmcheng]

@Jsum can you show how this is done? I can't seem to get this to work either. Thanks!

[Jsum]

@kmcheng, I don't know you exact code but it would look something like this:

<div class="banner-container" style="background: url(background-image.jpg)">
    <div class="banner-content">
         <h1>Heading</h1>
         <p>Sub heading</p>
     </div>
</div>

/* CSS */
.banner-container {
    padding: 150px 0;
    background-repeat: no-repeat !important;
    background-size: cover !Important;
    background-position: center !important;
}

You could apply the background image in the css as well.

[kmcheng]

Thanks @Jsum. Where would you put this code? Would you just have an html module and place this code within the page editor?

[Jsum]

@kmcheng Yes you can do that just replace the url and the content with yours or use Hubl modules.