Jump to content

Background color for title font

Recommended Posts

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,

 

background.png

Link to comment
  • Replies 12
  • Created
  • Last Reply

Top Posters In This Topic

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.

819472601_ScreenShot2020-10-23at11_02_29PM.png.5309969ab7f9e143043e91917b81365d.png

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.

386460007_ScreenShot2020-10-24at12_44_45PM.png.4ad9ec064df4fa4eb1c02a3646053781.png

 

203184450_ScreenShot2020-10-24at12_51_53PM.png.ab1f529dca26b32b0a54c7334229c9c8.png

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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.

819472601_ScreenShot2020-10-23at11_02_29PM.png.5309969ab7f9e143043e91917b81365d.png

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.

386460007_ScreenShot2020-10-24at12_44_45PM.png.4ad9ec064df4fa4eb1c02a3646053781.png

 

203184450_ScreenShot2020-10-24at12_51_53PM.png.ab1f529dca26b32b0a54c7334229c9c8.png

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!

 

homepage title.png

Link to comment

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.

1244765848_ScreenShot2020-10-27at8_15_28PM.png.fa505328db9b0fd50c3417604a5a6d3f.png

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>

 

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 5 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.