x

Transparent colored background, but solid text

Hi, I'm using a spash image for my homepage and need coding for a transparent colored background behind my text, that leaves the text solid.  The coding that I've come up with on the web makes the text transparent too.  Grateful for some guidance.

Thanks.

Phillip

4,990 Views
Message 1 of 12
Report
11 REPLIES 11
Square

Hey @Phillip!  We can't assist with custom questions ourselves, but it might help our css-savvy community members if they could see the page of your live site (assuming it's live).

4,981 Views
Message 2 of 12
Report

Hi Adam, my website isn't live yet, but I'll do as you suggest when it is live.  I'm sure this is a common issue with Weebly users, as our all-important text becomes much less prominent when it takes on the transparency of the background colour.

Thanks

Phillip

4,978 Views
Message 3 of 12
Report

Hi, my live site is at www.grcl.consulting

Any assistance regarding my home page would be much appreciated.  I think it would look much better if I could make the background colour behind the text transparent while keeping the text solid.  At the moment, the opacity setting affects the text too!

Thanks

Phillip

4,950 Views
Message 4 of 12
Report

Hey man.  Try adding/changing this in main-style.css if you're working there:

.paragraph-color16, .paragraph-color20 { background:none !important; }
4,937 Views
Message 5 of 12
Report

Thanks for your response BJ.  Although it's very simple code that I'm using, I'm not sure where to put our suggestion - as I'm not a coder.  Grateful for any further help.  Here is the coding that I'm using:

}
.paragraph-color41{
color: #7B99E1;
background: #404040;
filter:alpha(opacity=90);
opacity:0.7;
font-family: "Arial";
border-radius: 8px;
font-size: 41px;
font-weight: bold;
padding: 15px 15px 15px 15px;
margin:0 auto;
}

Thanks

Phillip

4,932 Views
Message 6 of 12
Report

Np, in the code you gave change this:

background: #404040;

to this:

background: none;
4,843 Views
Message 7 of 12
Report

Thanks BJ.  I actually want to keep that background color.  My aim is to make that background color more transparent, but keep my text solid i.e. I don't want the transparency of the background color to affect the text.

Any further thoughts gratefully received.

Regards

Phillip

4,838 Views
Message 8 of 12
Report

@Phillip

Try using a color block, instead of a section!

4,260 Views
Message 11 of 12
Report

Thanks for your suggestion.  What finally worked is a "Color Block" app from the Weebly app centre, which was suggested by Weebly.

This may be what you're referring too ...

4,230 Views
Message 11 of 12
Report

I can give no help, but I can tell you you've made a nice-looking website!

1,109 Views
Message 13 of 12
Report

Thanks for the compliment BSHDS.  

What finally worked is a "Color Block" app from the Weebly app centre, which was suggested by Weebly.

1,035 Views
Message 13 of 12
Report