How to make Text section have transparent background?

Site URL: https://www.octrobi.com/

Hello, I have a webpage with a repeating background image that I added via CSS. I want to add text to the page in a way that it literally only adds text, and fully displays my page's main background image. I've added a text section to the page, but unfortunately it adds a giant white block that stretches all the way across the screen. I've found that I can edit the background color of this block by editing the theme, but I don't want it to have a color. I want it to be transparent, as to only display the text. Is this possible? I've tried messing around with CSS but haven't had any luck. I feel like this is probably the simplest thing you can do to a webpage, and I'm surprised it's so hard to figure out.

Below is an image of what I'm talking about. I want the white gone so the purple background image can fully shine though, with literally just the text on top of it. I basically just want to add a "Site under maintenance message". Thanks.

Hi,

Do you still need help?

On 10/27/2021 at 4:32 AM, tuanphan said:

Hi,

Do you still need help?

Hi tuanphan! Yes, I was not able to figure it out. I've since removed the text, but would like to know if I can do this so I can add it back in 🙂 Thank you

Hi Tuphan, I also have the same question.

https://www.worldisonfire.com/world-is-on-fire

I am working to create a transparent background on my content area so the underlying image shows though, but also trying to hide both the header and footer to create a clean landing page on my site. All of the CSS I've tried so far from researching other posts has had no affect. Any suggestions you might have would be greatly appreciated!

Thanks in advance,

Julius

On 10/29/2021 at 9:38 AM, JoeDev said:

Hi tuanphan! Yes, I was not able to figure it out. I've since removed the text, but would like to know if I can do this so I can add it back in 🙂 Thank you

Hi,

Where is giant white block?

8 hours ago, Julius said:

Hi Tuphan, I also have the same question.

https://www.worldisonfire.com/world-is-on-fire

I am working to create a transparent background on my content area so the underlying image shows though, but also trying to hide both the header and footer to create a clean landing page on my site. All of the CSS I've tried so far from researching other posts has had no affect. Any suggestions you might have would be greatly appreciated!

Thanks in advance,

Julius

Add a Code Block above Ready text >> paste this code

<style>
  header.Header.Header--top {
    display: none !important;
}
  footer.Footer {
    display: none !important;
}
</style>

On 11/1/2021 at 4:35 AM, tuanphan said:

Hi,

Where is giant white block?

Add a Code Block above Ready text >> paste this code

<style>
  header.Header.Header--top {
    display: none !important;
}
  footer.Footer {
    display: none !important;
}
</style>

 

The giant white block is in the screenshot I included in my original post lol. Is the screenshot not showing up for you? Please look at the screenshot on my original post.

I took the text off my site because it looked bad, but I have now added it back into my site so you can see the source for it. Please have another look. Thank you!!!

6 hours ago, JoeDev said:

The giant white block is in the screenshot I included in my original post lol. Is the screenshot not showing up for you? Please look at the screenshot on my original post.

I took the text off my site because it looked bad, but I have now added it back into my site so you can see the source for it. Please have another look. Thank you!!!

You mean make image cover whole page + text over image?

On 11/7/2021 at 3:19 AM, tuanphan said:

You mean make image cover whole page + text over image?

When I add the text "Make it stand out" it automatically adds a white background behind it. I would like to completely get rid of the white background by making it transparent, so I can see my website's background behind the text. I literally just want to add text over my existing website background, and nothing else. Is this possible?

Thank you!

11 hours ago, JoeDev said:

When I add the text "Make it stand out" it automatically adds a white background behind it. I would like to completely get rid of the white background by making it transparent, so I can see my website's background behind the text. I literally just want to add text over my existing website background, and nothing else. Is this possible?

Thank you!

Hi,

Add to Design > Custom CSS

[data-section-id="618732598d98cc27e03cee86"] {
    position: absolute;
    background-color: transparent;
    width: 100%;
}
[data-section-id="618732598d98cc27e03cee86"] .section-background {
    background-color: transparent !important;
}

On 11/9/2021 at 12:57 PM, tuanphan said:

Hi,

Add to Design > Custom CSS

[data-section-id="618732598d98cc27e03cee86"] {
    position: absolute;
    background-color: transparent;
    width: 100%;
}
[data-section-id="618732598d98cc27e03cee86"] .section-background {
    background-color: transparent !important;
}

 

hi Tuphan totally unrelated to the above however do you know any code for moving a button further up on mobile view. 

URL : MY RECOVERY | UK's No. 1 Brand For Infrared lights (myrecoveryuk.co.uk)

Regards,

Jake

On 3/13/2022 at 10:48 PM, jakelyd said:

hi Tuphan totally unrelated to the above however do you know any code for moving a button further up on mobile view. 

URL : MY RECOVERY | UK's No. 1 Brand For Infrared lights (myrecoveryuk.co.uk)

Regards,

Jake

 

Add to Design > Custom CSS

/* Mobile move button up */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1636970391066_6366 {
    position: relative;
    top: -150px;
}
}

15 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Mobile move button up */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1636970391066_6366 {
    position: relative;
    top: -150px;
}
}

 

thanks again Tuphan, you know your stuff ! if i want to pick up the basics of coding where would be best to start looking?

11 hours ago, jakelyd said:

thanks again Tuphan, you know your stuff ! if i want to pick up the basics of coding where would be best to start looking?

I usually find code in W3Schools.

You can consider CSS coures by @WillMyers

On 3/16/2022 at 7:19 AM, tuanphan said:

I usually find code in W3Schools.

You can consider CSS coures by @WillMyers

okay thank you Tuphan any ideas why my seo is previewing how i want it to however when i actually search for my site the seo title is still my old seo title 

1 hour ago, jakelyd said:

okay thank you Tuphan any ideas why my seo is previewing how i want it to however when i actually search for my site the seo title is still my old seo title 

Try submit your site to Google Search Console to make Google update

On 3/21/2022 at 6:22 AM, tuanphan said:

Try submit your site to Google Search Console to make Google update

okay thank you