Highlighting text in CSS (Flex theme)

[MaxCosta]

Hi everyone,

I'm trying to highlight a text, to make a background appear behind my text, like here :

The text I want to apply this to is the text at the bottom left of my slider (the first section of my home page https://akrofragrances.com/).

Je souhaite appliquer un fond de couleur blanc (sur ce texte noir)

I tried this code snippet in my CSS:

a {
text-color: black;
background-color: white;
}

However, the background-color is applied to my entire section and everything becomes white.

Does anyone have an idea for this please?

Thanks in advance!

[Tech_Coding]

Hello @MaxCosta 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .slideshow-classic__preheading.pretext p a {
      background: #fff;
      padding: 5px;
   }
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[BSSCommerce-HDL]

Hi @MaxCosta, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.slideshow-classic__preheading.pretext a {
    text-shadow: 2px 2px 5px rgba(255, 255, 0, 0.7);
    font-weight: bold;
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[GTLOfficial · Accepted solution]

HEllo @MaxCosta 

Go to online store ----> themes ----> actions ----> edit code ----> assets ----> styles.css
add this code at the end of the file.

#shopify-section-image_6q4q98 .slideshow-classic__preheading {
background-color: #e9ee00;
width: fit-content;
line-height: 1 !important;
padding: 0 !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks