Why doesn't this work: rgba(85, 138, 29, 0.3) ?

vmars316 · January 31, 2022

Tia :

Why would this work:

<body style="background-color: rgba(85, 138, 29, 0.9);"   alink="#FFFFFF"   link="#FFFFFF" vlink="#FFFFFF">

And this not work:

<p class="p2" contenteditable="false" style="text-align: left; background-color: rgba(85, 138, 29, 0.3);">

Ingolme · January 31, 2022

I tested the code that you provided and it works as expected.

There must be some context missing.

vmars316 · February 1, 2022

<!DOCTYPE html>
<html><head><meta content="text/html; ">
<!--  https://vmars.us/SafeBrowser/SafeBrowserHome.html  -->
<title>SafeBrowser-HELP.html</title>
<style>
//body {
//     background-color: rgb(113, 30 , 19);
//}
table {
border-style: none;  
border-spacing: 0 1px;
}
tr {
border-style: none;  
}

.trBetween {

}


.p1 {
color: rgb(0, 0, 0);
vertical-align: top;
width: 100%;
font-size: 20px;
border-style:none;
//border-color: white white rgb(246, 244, 242) white; 
//border-width: 2px;
background-color: rgb(246, 244, 242); }

.p2 {
color: rgb(0, 0, 0);
vertical-align: top;
width: 100%;
font-size: 20px;
font-weight: bold;
border-style:none;
//border-color: white white rgb(246, 244, 242) white; 
//border-width: 2px;
//background-color: #558A1D;
//background-color: rgba(85, 138, 29, 0.1);
//background-color:rgba(85, 138, 29, 0.3);
}

.fBtn01{ // Draw Button background 
font-family:"Verdana", sans-serif; background-color:#D0D0D0;   // #C8C8C8;  //  #e1e1e1;   626262; F2F1ED;
font-size:16.0px; line-height:1.13em; font-weight: bold;
border-style: solid; border-color: #0000ff;
border-width: 2px;
text-align: center;
}
.udL {text-decoration: underline; font-size:16px;} 
.udLB {text-decoration: underline; font-size:16.0px; font-weight: bold;}
.BLD {font-size:16.0px; font-weight: bold;}

</style>
</head>

<!-- <body style="background-color:#253C0D; color: #ab1b50; font-size: 20px;"> 
<body style="background-color:#558A1D;"   alink="#FFFFFF"   link="#FFFFFF" vlink="#FFFFFF">  -->
<body style="background-color: rgba(85, 138, 29, 0.9);"   alink="#FFFFFF"   link="#FFFFFF" vlink="#FFFFFF"> 
<h2 style="text-align: center; color: #FFFFFF; " >SafeBrowser-HELP.html</h2>

<p class="p1" contenteditable="false" style="text-align: center; "> 
<img src="SafeBrowserEditor.png" width="500px" alt="SafeBrowserEditor-Mini.png" >
<br>To see a larger image , right-click , then select 'Open image in New Tab' .
</p>

<p class="p2" contenteditable="false" style="text-align: left; background-color: rgba(85, 138, 29, 0.3);"> 
&nbsp;&nbsp;  Welcome to SafeBrowser Editor .
<br>Herein is a listing of the TWO 'Approved Link Files' .
<br> One contains &nbsp; 'Whole Sites Links' 'named: 'SakerPlats.swd' (in Swedish it means 'Safe Sites') .
<br> The other contains &nbsp; 'Specific Links' 'named: 'SakerLank.swd' (in Swedish it means 'Safe Links')
<br>'Whole Sites Links' means that the Whole Site is Approved , the User can go anywhere on that site .
<br>'Specific Links' means that only certain Links on a Site are Approved . &nbsp; For example , 
you may not want the User to have access to everything on YouTuube , only certain videos ,

</p>

<p class="p2" contenteditable="false" style="text-align: left;"> 
&nbsp;&nbsp; 
<span class="fBtn01"> or Browse </span> &nbsp;&nbsp;  First step : So , click on the 'onBrowse' button and locate this FOLDER .
</p>
<p class="p2" contenteditable="false" style="text-align: left;"> 
&nbsp;&nbsp; 
<span class="fBtn01"> button name goes here</span>
&nbsp;&nbsp; Text goes here :
</p>

<p class="p2" contenteditable="false" style="text-align: left;"> 
&nbsp;&nbsp; 
<span class="fBtn01"> button name goes here</span>
&nbsp;&nbsp; Text goes here :
</p>

<!--StartMessageHere-->
<script src="https://www.biblegateway.com/public/link-to-us/tooltips/bglinks.js" type="text/javascript">
</script>
<script type="text/javascript">
BGLinks.version = "GNT";
BGLinks.linkVerses();
</script>
<div id="bg_popup-container"></div>
</body>
</html>

Ingolme · February 1, 2022

It is working. This may be a problem with your expectations.

Was your expectation that the color would appear lighter behind the paragraph than behind the rest of the page?

The body and the paragraph have the same background color, just with different levels of alpha. When layered on top of each other, the colors mix together and the difference is nearly imperceptible. I can see the slight tone variation, the paragraph is darker by a tiny amount because its alpha is mixing with the alpha behind it.

vmars316 · February 1, 2022

Ah , didn't know about the mixing .

Hmm...

Seems to me we used to be able to propagate a small image to fill the background .

I forget what that is called , is that still an option ?

Ingolme · February 1, 2022

Background images can be stretched to fill their container using the "cover" or "contain" keywords of the background-size property: https://www.w3schools.com/cssref/css3_pr_background-size.asp

If you want a repeating image, that's the default behavior for background images.

vmars316 · February 1, 2022

Aha !

That's it "cover" .

As always , Thank you very much !

vmars316 · February 1, 2022

Hmm...

It doesn't like my

background shows as white , my syntax must be wrong , but I don't see error ?

<!DOCTYPE html>
<html><head><meta content="text/html; ">
<!--  https://vmars.us/SafeBrowser/SafeBrowserHome.html  -->
<title>SafeBrowser-HELP.html</title>
<style>
//body {
//     background-color: rgb(113, 30 , 19);
//}
table {
border-style: none;  
border-spacing: 0 1px;
}
tr {
border-style: none;  
}

.trBetween {

}


.p1 {
color: rgb(0, 0, 0);
vertical-align: top;
width: 100%;
font-size: 20px;
border-style:none;
//border-color: white white rgb(246, 244, 242) white; 
//border-width: 2px;
background-color: rgb(246, 244, 242); }

.p2 {
color: rgb(0, 0, 0);
vertical-align: top;
width: 100%;
font-size: 20px;
font-weight: bold;
border-style:none;
//border-color: white white rgb(246, 244, 242) white; 
//border-width: 2px;
//background-color: #558A1D;
//background-color: rgba(85, 138, 29, 0.1);
//background-color:rgba(85, 138, 29, 0.3);
}

.fBtn01{ // Draw Button background 
font-family:"Verdana", sans-serif; background-color:#D0D0D0;   // #C8C8C8;  //  #e1e1e1;   626262; F2F1ED;
font-size:16.0px; line-height:1.13em; font-weight: bold;
border-style: solid; border-color: #0000ff;
border-width: 2px;
text-align: center;
}
.udL {text-decoration: underline; font-size:16px;} 
.udLB {text-decoration: underline; font-size:16.0px; font-weight: bold;}
.BLD {font-size:16.0px; font-weight: bold;}

</style>
</style>
</head>

<body  style="background-image: url('Hex-558A1D.png'); background-size: cover;" > 
<h2 style="text-align: center; color: #FFFFFF; " >SafeBrowser-HELP.html</h2>

<p class="p1" contenteditable="false" style="text-align: center; "> 
<img src="SafeBrowserEditor.png" width="500px" alt="SafeBrowserEditor-Mini.png" >
<br>To see a larger image , right-click , then select 'Open image in New Tab' .
</p>

<p class="p2" contenteditable="false" style="text-align: left; background-color: #CCDDAA;"> 
&nbsp;&nbsp;  Welcome to SafeBrowser Editor .
<br>Herein is a listing of the TWO 'Approved Link Files' .
<br> One contains &nbsp; 'Whole Sites Links' 'named: 'SakerPlats.swd' (in Swedish it means 'Safe Sites') .
<br> The other contains &nbsp; 'Specific Links' 'named: 'SakerLank.swd' (in Swedish it means 'Safe Links')
<br>'Whole Sites Links' means that the Whole Site is Approved , the User can go anywhere on that site .
<br>'Specific Links' means that only certain Links on a Site are Approved . &nbsp; For example , 
you may not want the User to have access to everything on YouTuube , only certain videos ,

</p>

<p class="p2" contenteditable="false" style="text-align: left;"> 
&nbsp;&nbsp; 
<span class="fBtn01"> button name goes here</span>
&nbsp;&nbsp; Text goes here :
</p>

<p class="p2" contenteditable="false" style="text-align: left;"> 
&nbsp;&nbsp; 
<span class="fBtn01"> button name goes here</span>
&nbsp;&nbsp; Text goes here :
</p>

<!--StartMessageHere-->
<script src="https://www.biblegateway.com/public/link-to-us/tooltips/bglinks.js" type="text/javascript">
</script>
<script type="text/javascript">
BGLinks.version = "GNT";
BGLinks.linkVerses();
</script>
<div id="bg_popup-container"></div>
</body>
</html>

vmars316 · February 1, 2022

This is the color scheme I am aiming for , except in reverse:

https://www.vmars.us/SafeBrowser/SafeBrowserHome.html

https://www.vmars.us/SafeBrowser/SafeBrowserHome.html

Edited February 1, 2022 by vmars316

Ingolme · February 1, 2022

It might be that the path Hex-558A1D.png isn't pointing to the image. It might be in another folder.

Unrelated to the main problem, the syntax "//" doesn't work for comments in CSS. CSS comments can only be in the form /* comment */. The "//" comments may be breaking some of the other rules in your stylesheet.

vmars316 · February 2, 2022

Ok , I'll check it out .

I generally use the '//' to keep track of what I already tried .

vmars316 · February 2, 2022

I got pretty much what I wanted by using <table> .

I'll fight this battle <body style=" background-image: url('Hex-558A1D.png'); background-repeat: no-repeat; background-size: cover; " >

another day .

<!DOCTYPE html>
<html><head><meta content="text/html; ">
<!--  https://vmars.us/SafeBrowser/SafeBrowserHome.html  -->
<title>SafeBrowser-HELP.html</title>
<style>
body {
}
table {
border-style: none;  
border-spacing: 0 1px;
}
tr {
border-style: none;  
}

.trBetween {
}

.p1 {
color: rgb(0, 0, 0);
vertical-align: top;
width: 100%;
font-size: 20px;
border-style:none;
background-color: #558A1D; 
}

.p2 {
color: rgb(0, 0, 0);
vertical-align: top;
width: 100%;
font-size: 20px;
font-weight: bold;
border-style:none;
background-color: #CCDDAA;
}

.fBtn01{ // Draw Button background 
font-family:"Verdana", sans-serif; background-color:#D0D0D0;   // #C8C8C8;  //  #e1e1e1;   626262; F2F1ED;
font-size:16.0px; line-height:1.13em; font-weight: bold;
border-style: solid; border-color: #0000ff;
border-width: 2px;
text-align: center;
}
.udL {text-decoration: underline; font-size:16px;} 
.udLB {text-decoration: underline; font-size:16.0px; font-weight: bold;}
.BLD {font-size:16.0px; font-weight: bold;}

</style>
</head>

<body  style=" background-image: url('Hex-558A1D.png'); background-repeat: no-repeat; background-size: cover; " > 
<table>
<tr>
<td  style=" background-color: #558A1D;" >
<p class="p1">
<h2 style="text-align: center; background-color: #FF0000; color: #FFFFFF; " >SafeBrowser-HELP.html</h2>
</p>

<div class="p1" contenteditable="false" style="text-align: center; "> 
<img src="SafeBrowserEditor.png" width="500px" alt="SafeBrowserEditor-Mini.png" >
<br><p style="color: #FFFFFF;" >To see a larger image , right-click , then select 'Open image in New Tab' .</p>
</div>

<p class="p2" contenteditable="false" style="text-align: left;"> 
&nbsp;&nbsp;  Welcome to SafeBrowser Editor .
<br>Herein is a listing of the TWO 'Approved Link Files' .
<br> One contains &nbsp; 'Whole Sites Links' 'named: 'SakerPlats.swd' (in Swedish it means 'Safe Sites') .
<br> The other contains &nbsp; 'Specific Links' 'named: 'SakerLank.swd' (in Swedish it means 'Safe Links')
<br>'Whole Sites Links' means that the Whole Site is Approved , the User can go anywhere on that site .
<br>'Specific Links' means that only certain Links on a Site are Approved . &nbsp; For example , 
you may not want the User to have access to everything on YouTuube , only certain videos ,



</p>

<p class="p2" contenteditable="false" style="text-align: left;"> 
&nbsp;&nbsp; 
<span class="fBtn01"> button name goes here</span>
&nbsp;&nbsp; Text goes here :
</p>

<p class="p2" contenteditable="false" style="text-align: left;"> 
&nbsp;&nbsp; 
<span class="fBtn01"> button name goes here</span>
&nbsp;&nbsp; Text goes here :
</p>

<p class="p2" contenteditable="false" style="text-align: left;"> 
&nbsp;&nbsp; 
<span class="fBtn01"> button name goes here</span>
&nbsp;&nbsp; Text goes here :
</p>
</td>
</tr>
<table>
<!--StartMessageHere-->
<script src="https://www.biblegateway.com/public/link-to-us/tooltips/bglinks.js" type="text/javascript">
</script>
<script type="text/javascript">
BGLinks.version = "GNT";
BGLinks.linkVerses();
</script>
<div id="bg_popup-container"></div>
</body>
</html>

Thanks

Why doesn't this work: rgba(85, 138, 29, 0.3) ?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in