Filling the black box i added behind text

Store Design
, , , , ,
1

Hi, im trying to make an semi transparent black box behind text to make the text more readable, the question is - How do I fill the spaces between the p’s, This is the code i added for the box:

p {
position: relative;
top: 12px;
background: #000000;
}

Czaban_0-1693939449443.png
Czaban_0-1693939449443.png1636×918 453 KB

my site - Bitwash.eu

1 Like
2

Hi @Czaban

Try this.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
h1.main-page-title.page-title.h0.scroll-trigger.animate--fade-in {
    background: black;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
3

Hi @Czaban ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid file
  3. Paste below code before :

Beae_Anthony_0-1693939924646.png
Beae_Anthony_0-1693939924646.png807×579 121 KB

Best regards,

Anthony

1 Like
4

Thank you very much sir it worked! One quick question, how can i make the background transparent, i tried adding opacity: 40% and its making the text transparent too…

5

Yes,I’m glad to help you. You can try this code below:

Beae_Anthony_0-1693941315594.png
Beae_Anthony_0-1693941315594.png1161×605 670 KB

Best regards,

Anthony

1 Like
6

Thank you very very much sir! You are a life saver :heart:

7

Glad that helps you! Have a good day :blush:

1 Like