Jump to content

How to make Text section have transparent background?

Recommended Posts

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.

white text box.PNG

Link to comment
  • Replies 16
  • Views 1.8k
  • Created
  • Last Reply

Top Posters In This Topic

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

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

image.thumb.png.3636a90acbd3e8ff60e68a64f3c8a516.png

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Hi,

Where is giant white block?

image.thumb.png.3636a90acbd3e8ff60e68a64f3c8a516.png

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!!!

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

image.thumb.png.0ebf1e22505766444f4b5051dbf2a91f.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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

image.thumb.png.0ebf1e22505766444f4b5051dbf2a91f.png

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!

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...
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

 

InkedMY RECOVERY  UK's No. 1 Brand For Infrared lights_LI.jpg

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

 

InkedMY RECOVERY  UK's No. 1 Brand For Infrared lights_LI.jpg

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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

 

seo.png

Untitled design (2).png

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