Background color for title font

Site URL: https://green-drum-5z5y.squarespace.com/

Hi all, I would like to create a background color behind some heading fonts that are over banner images, like this example below. I can create a background colour behind the whole text box, but I want it only behind the font lines, like in the attached.

Can someone please help me out with either a custom CSS, html or markup solution for this?

My site is in development but can share a password to access if required.

Thanks,

Please share your site-wide password so we can take a look a your issue.

Just use the pw Chameleon

https://green-drum-5z5y.squarespace.com/

Many thanks

It would help to have the URL for your example site as well.

Hi dude, yeah I've shared that a couple of times. Here it is again: https://green-drum-5z5y.squarespace.com/

Did you share the site URL for the image that says STOP FOSSIL FUELS? Your example site?

Gotcha, that example is on this site: https://350.org.au/

I don't have a specific solution just some experiments. I think we can get you pretty close to that effect.

Method 1

Create a text block with the desired text. The trick is to make sure you hit return where you want the text to break. A home grown return construction return company with heart.

Then we need to add some CSS. Keep in mind that the block ids shown would need to be replaced with ones from your own site.

/* method 1 */

#block-yui_3_17_2_1_1603517265460_3921:not( .sqs-block-editing ) h1 {

  background-color: rgba( 255, 0, 0, 0.5 );
  display: inline-block;
  margin-bottom: 0;
  margin-top: 0;
  padding-left: 0.25em;
  padding-right: 0.25em;
  
  }

#block-yui_3_17_2_1_1603517265460_3921 h1:last-child {

  padding-bottom: 0.25em;
  
  }

Which results in the following.

I have noticed some responsiveness issues for this technique.

Method 2

This is closer to the method shown on the example site in the pic in the original post.

<!-- method 2 -->

<style>

  .h1-inline-background {
  
    background-color: red;
    display: inline;
    line-height: 1.4em;
    padding: 0 0.25em;
    text-transform: uppercase;
    
    }
    
  .break-hide {
  
    display: none;
    
    }
    
  </style>

<h1 class="h1-inline-background">
  
    A home grown
    
    <br class="break-hide">
    
    construction
    
    <br class="break-hide">
    
    company with heart.
    
  </h1>

If someone wants to take these examples to a final solution. Please feel free.

Thanks mate, I appreciate the help. I'll give these a try and respond here with feedback and any other info. 

On 10/25/2020 at 8:54 AM, creedon said:

I don't have a specific solution just some experiments. I think we can get you pretty close to that effect.

Method 1

Create a text block with the desired text. The trick is to make sure you hit return where you want the text to break. A home grown return construction return company with heart.

Then we need to add some CSS. Keep in mind that the block ids shown would need to be replaced with ones from your own site.

/* method 1 */

#block-yui_3_17_2_1_1603517265460_3921:not( .sqs-block-editing ) h1 {

  background-color: rgba( 255, 0, 0, 0.5 );
  display: inline-block;
  margin-bottom: 0;
  margin-top: 0;
  padding-left: 0.25em;
  padding-right: 0.25em;
  
  }

#block-yui_3_17_2_1_1603517265460_3921 h1:last-child {

  padding-bottom: 0.25em;
  
  }

Which results in the following.

 

I have noticed some responsiveness issues for this technique.

Method 2

This is closer to the method shown on the example site in the pic in the original post.

<!-- method 2 -->

<style>

  .h1-inline-background {
  
    background-color: red;
    display: inline;
    line-height: 1.4em;
    padding: 0 0.25em;
    text-transform: uppercase;
    
    }
    
  .break-hide {
  
    display: none;
    
    }
    
  </style>

<h1 class="h1-inline-background">
  
    A home grown
    
    <br class="break-hide">
    
    construction
    
    <br class="break-hide">
    
    company with heart.
    
  </h1>

If someone wants to take these examples to a final solution. Please feel free.

Thanks @creedon, it was method two that I think works best in responsive modes. But I can't get the padding quite right. 

the padding [0 0.25em] applies only to the top and bottom of the three lines of text. so there is padding before the 'A' to start the first line but then not the first letters of the next two lines. And padding after the final full stop, or period.

I've tried adding padding to .h1-inline-background id but it doesn't seem to apply evenly to all three lines.

If you or anyone has any suggestions to make padding even at the start and end of each line of h1 text, that would be awesome.

Thanks!

The padding issue was something I noticed with the original sample provided. If you bring it up in the browser and play with the window width you can see it in action.

Padding only works on the top, left, bottom, right of the whole element and not within the lines of the element.

You can try adapting method 2 something like to following.

<!-- method 2, variation 1 -->

<style>

  .h1-inline-background {
  
    background-color: red;
    display: inline;
    line-height: 1.4em;
    padding: 0 0.25em;
    text-transform: uppercase;
    
    }
    
  </style>

<h1 class="h1-inline-background">
  
    A home grown&nbsp;
    
    <br />
    
    &nbsp;construction&nbsp;
    
    <br />
    
    &nbsp;company with heart.
    
  </h1>

On 10/24/2020 at 3:36 AM, Callan said:

I can create a background colour behind the whole text box,

Hi can you tell me how to do this please.

@Leykers

In general to put a background color on something you'd do something like the following. This is just an example.

body {

  background-color : red;

  }