Jump to content

Light and dark text over banners

Recommended Posts


I am building a site for a client, in Brine, and I need to have the option to have light and dark text over banners. If I change the overlay text to dark, then I cannot use dark banners. I tried using some code, Option 1, and then Option 2,  but then the images on banners stopped displaying.

Option 1

<div class=“coloredtext”>
<h2>Type your Heading 2 text in here</h2>
<h3>Type your Heading 3 text in here</h3>
<p>Type your Paragraph text in here</p>
.coloredtext *h1*, 
.coloredtext *h2*, 
.coloredtext *h3*, 
.coloredtext *h4*,
.coloredtext *p* 
{color: *#ffffff* !important;}

Option 2

  .p_blackblock{ color:black;}
  .h2_blackblock{ color:black;}

I don't code, I used Option 1 from a forum, and option 2 was provided by a friend who codes.


Anyone can help me doing this?


Thank you!

Link to comment
  • Replies 2
  • Views 618
  • Created
  • Last Reply

Without seeing an example i'm not totally certain i get what you're going for. But i'm guessing you are trying to accommodate visible text regardless of whether the image behind it is dark or light. This sounds like a conditional problem which usually requires a lot of code to first figure out if the background is light enough to be "light" or vice versa. 

Alternatively, the much simpler solution is just to use text shadow so that regardless of whether the background image is light or dark the text is still legible. 


h1 {
color: #fff;
text-shadow: 1px 1px 4px #000;

In this example the h1 text will be white (#fff), and also have a black shadow around it. 

In the text-shadow tag the first number is the vertical position of the shadow, the second is the horizontal position of the shadow (you can move the shadow left with negative numbers "-2px"), and the third number is how much blur is applied to the shadow. The last number is the color of the shadow in hex code. 

Hope that helps

Link to comment

Thank you very much!! I will try this, what I want to be able is to choose to have a light headline when I have a dark background, do it manually because as you say, having it detecting automatically involves a lot, but I was thunking more in just  adding some simple code to the headline where it goes on a dark background. Thanks!!

Link to comment


This topic is now archived and is closed to further replies.

  • 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.