vmars316 Posted January 31, 2022 Share Posted 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);"> Link to comment Share on other sites More sharing options...
Ingolme Posted January 31, 2022 Share Posted January 31, 2022 I tested the code that you provided and it works as expected. There must be some context missing. Link to comment Share on other sites More sharing options...
vmars316 Posted February 1, 2022 Author Share Posted 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);"> Welcome to SafeBrowser Editor . <br>Herein is a listing of the TWO 'Approved Link Files' . <br> One contains 'Whole Sites Links' 'named: 'SakerPlats.swd' (in Swedish it means 'Safe Sites') . <br> The other contains '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 . 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;"> <span class="fBtn01"> or Browse </span> First step : So , click on the 'onBrowse' button and locate this FOLDER . </p> <p class="p2" contenteditable="false" style="text-align: left;"> <span class="fBtn01"> button name goes here</span> Text goes here : </p> <p class="p2" contenteditable="false" style="text-align: left;"> <span class="fBtn01"> button name goes here</span> 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> Link to comment Share on other sites More sharing options...
Ingolme Posted February 1, 2022 Share Posted 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. Link to comment Share on other sites More sharing options...
vmars316 Posted February 1, 2022 Author Share Posted 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 ? Link to comment Share on other sites More sharing options...
Ingolme Posted February 1, 2022 Share Posted 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. Link to comment Share on other sites More sharing options...
vmars316 Posted February 1, 2022 Author Share Posted February 1, 2022 Aha ! That's it "cover" . As always , Thank you very much ! Link to comment Share on other sites More sharing options...
vmars316 Posted February 1, 2022 Author Share Posted February 1, 2022 Hmm... It doesn't like my <body style="background-image: url('Hex-558A1D.png'); background-size: cover;" > 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;"> Welcome to SafeBrowser Editor . <br>Herein is a listing of the TWO 'Approved Link Files' . <br> One contains 'Whole Sites Links' 'named: 'SakerPlats.swd' (in Swedish it means 'Safe Sites') . <br> The other contains '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 . 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;"> <span class="fBtn01"> button name goes here</span> Text goes here : </p> <p class="p2" contenteditable="false" style="text-align: left;"> <span class="fBtn01"> button name goes here</span> 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> Link to comment Share on other sites More sharing options...
vmars316 Posted February 1, 2022 Author Share Posted February 1, 2022 (edited) 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 Link to comment Share on other sites More sharing options...
Ingolme Posted February 1, 2022 Share Posted 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. Link to comment Share on other sites More sharing options...
vmars316 Posted February 2, 2022 Author Share Posted February 2, 2022 Ok , I'll check it out . I generally use the '//' to keep track of what I already tried . Link to comment Share on other sites More sharing options...
vmars316 Posted February 2, 2022 Author Share Posted 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;"> Welcome to SafeBrowser Editor . <br>Herein is a listing of the TWO 'Approved Link Files' . <br> One contains 'Whole Sites Links' 'named: 'SakerPlats.swd' (in Swedish it means 'Safe Sites') . <br> The other contains '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 . 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;"> <span class="fBtn01"> button name goes here</span> Text goes here : </p> <p class="p2" contenteditable="false" style="text-align: left;"> <span class="fBtn01"> button name goes here</span> Text goes here : </p> <p class="p2" contenteditable="false" style="text-align: left;"> <span class="fBtn01"> button name goes here</span> 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now