Runboard.com
Слава Україні!
open to all ages

Runboard       Sign upCreate Accountlearn about itSign inlost password?

Page:  1  2  3 

 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator

Registered: 07-2005
Location: Texas
Posts: 241
Karma: -1 (+0/-1)
Reply ● Quote
No Host Required (Backgrounds for your Board)


When PhotoBucket started their escapades which threw everyone into a lurch, I began exploring options for Runboarder's which did not require a host. Listed below this post are my CSS solutions to this problem.

---

Advertise Boards On TRDConceptsDE
4/30/19, 1:19 pm Link to this post Email Pastor Rick   PM Pastor Rick Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator

Registered: 07-2005
Location: Texas
Posts: 241
Karma: -1 (+0/-1)
Reply ● Quote
Blue Plaid Background


/* CSS Background */
body {background-color: #3399cc;
background-image: linear-gradient(rgba(255,255,255,.07) 50%, transparent 50%),
linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
linear-gradient(transparent 50%, rgba(255,255,255,.17) 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
background-size: 15px, 25px, 35px, 45px;}

Image

---

Advertise Boards On TRDConceptsDE
4/30/19, 1:23 pm Link to this post Email Pastor Rick   PM Pastor Rick Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator

Registered: 07-2005
Location: Texas
Posts: 241
Karma: -1 (+0/-1)
Reply ● Quote
Blue Weave Background


/* CSS Background */
body {background: #B3E1FF; /* fallback color */
background:
linear-gradient(60deg, transparent 75%, transparent 75%, rgba(255,255,255,.7) 75%) 0 0,
linear-gradient(245deg, transparent 75%, rgba(25,250,245,.6) 45%) 0 0,
linear-gradient(60deg, transparent 75%, rgba(255,255,255,.7) 75%) 7px -15px,
linear-gradient(245deg, transparent 75%, rgba(25,255,245,.8) 45%) 7px -13px,
#3399ff; /* sets the primary color for the pattern */
background-size: 4px 40px}

Image

---

Advertise Boards On TRDConceptsDE
4/30/19, 1:26 pm Link to this post Email Pastor Rick   PM Pastor Rick Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator

Registered: 07-2005
Location: Texas
Posts: 241
Karma: -1 (+0/-1)
Reply ● Quote
Sky Globes Background


Sky Globes - I made significant changes to a CSS3 pattern I found on the Internet to make this "Runboard Compatible" CSS "radial-gradient" background. The creator of the original (Auke Zwart) made the code "public domain" to encourage its use.

/* CSS Background */
body {background:
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 85px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -150px -180px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 200px 105px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0,
linear-gradient(45deg, #26466D 0%, #2B4F81 15%, #4973AB 31%, #4981CE 42%, #1D7CF2 50%, #75A1D0 60%, #003F87 70%, #3B6AA0 80%, #36648B 90%, #344152 100%);
background-size: 225px 225px, 450px 450px, 150px 150px, 300px 300px, 250px 250px, 350px 350px, 100% 100%;
background-color: #840b2a;}

Image

---

Advertise Boards On TRDConceptsDE
4/30/19, 1:28 pm Link to this post Email Pastor Rick   PM Pastor Rick Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator

Registered: 07-2005
Location: Texas
Posts: 241
Karma: -1 (+0/-1)
Reply ● Quote
Diagonal Blues Background


I am going to call this one "Diagonal Blues" because the CSS is small, but the size of the dataurl is so large it freezes Runboard (on my browser) when I try to post it. So the image you see is a PNG "screen capture" hosted on rbbt.

/* CSS Background */
body {
  background-image: linear-gradient(44.61803379527095deg, #799bb3, #7596b5 0.9%, #7fabc7 2.3%, #7ca4c2 2.8%, #6b97b5 3.7%, #669bb8 4.2%, #66a9cb 5.1%, #67a7cb 5.6%, #67a0c5, #5e9ac2 6.6%, #5a9ac1 7.5%, #5799cb 8%, #5898cb 8.4%, #5696c6 8.9%, #4e8cc0 9.9%, #4a88c4 10.3%, #4788c8 10.8%, #4782c4 11.7%, #3f7bb5 12.7%, #4585c8 13.6%, #4883c6 14.1%, #447bb6 15%, #427abd, #447fc6, #477ec0 16.5%, #4778ba 16.9%, #4677b6 17.4%, #4b81c7 18.3%, #4e85c5, #4f84c1 19.3%, #4e82c3 20.2%, #5389ca 21.2%, #5485c7 21.6%, #5281c2 22.1%, #5088c7 23.1%, #558ccc 23.5%, #5382c4 25%, #5486ca 25.4%, #5789c8 25.9%, #4d82c1 26.8%, #4783c5 27.3%, #5087ca 28.3%, #5982c0 29.2%, #5c82bc 29.7%, #598abe 30.1%, #5c95cd 31.1%, #5f97c8 31.6%, #6495c6 32.5%, #6598c7 33%, #6a9ed0 33.4%, #6ea4d5 33.9%, #6fa3d5, #6d9dc8 34.9%, #6c9bc7 35.3%, #6b9dca, #70a0cb 36.3%, #7fa9c5 37.2%, #83a7c2, #7fa5b7 38.2%, #7da2b5 38.6%, #7ca2bb 39.1%, #7eb1c8 40%, #82b3c7 40.5%, #8aacc2 41.5%, #89a9bf 41.9%, #89a8b9, #8daab9 42.9%, #92b0ca 43.8%, #90a6b5 45.7%, #90a6b5 46.2%, #8fa9b7 46.6%, #8fadc2 47.6%, #8ea8c3 48.5%, #87a0b5 49.5%, #8ba9bd 51.4%, #8ca7bc 52.3%, #8ca0b4, #8a9cae 53.3%, #859db0, #85aac0 55.1%, #82a9bb 56.1%, #7595b3 57%, #7393b0, #759cb7 58%, #7fadc8 58.9%, #7ea8c4 59.4%, #689ab5 60.8%, #649fbb 61.3%, #67aacd 62.2%, #639ac0 63.2%, #5e97bb 63.6%, #5a94bc 64.1%, #599acc 65%, #589acb 65.5%, #4986c0 66.9%, #4887c0 67.4%, #4a88c9 68.3%, #417eb9 69.3%, #4787c6 70.7%, #4782c3 71.2%, #437db6 71.6%, #4880c9 73.1%, #4877bb 74%, #487cbb 74.5%, #4d85c6 75.4%, #5183c4 76.8%, #5285ca, #5489cc 77.8%, #5484c6 78.7%, #5283c2 79.2%, #558ccd 80.6%, #5685c4 81.6%, #5884c8 82%, #5a86c7 83%, #4b83c3 83.9%, #5c86c6 85.8%, #5c84be 86.3%, #5888bb 86.7%, #5f97cf 88.2%, #679ac9 90%, #6ea4d3 91%, #6ea1cc 91.5%, #6e9cca 91.9%, #6e9ec6 92.9%, #7daac9 93.8%, #82abc7 94.3%, #7ea4b9 95.2%, #7a9eba 95.7%, #77a6c5 96.6%, #7fadc6 97.1%, #87aec6 98.5%, #8aa8bc 99.5%, #8aa8bc)
}

Image

---

Advertise Boards On TRDConceptsDE
4/30/19, 1:31 pm Link to this post Email Pastor Rick   PM Pastor Rick Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator

Registered: 07-2005
Location: Texas
Posts: 241
Karma: -1 (+0/-1)
Reply ● Quote
Magic Circles Background


Many Thanks to Firlefanz for giving this background a name. emoticon

/* CSS Background */
body {
height: 525px;
background-color:#000000;
background-image:
radial-gradient(#ffffff, rgba(255,255,255,.2) 2px, transparent 20px),
repeating-radial-gradient(#0099ff, rgba(255,255,255,.15) 10px, transparent 36px),
radial-gradient(#cccc00, rgba(255,255,255,.1) 2px, transparent 30px),
radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 10px);
background-size: 440px 350px, 330px 360px, 220px 255px, 130px 150px;
background-position: 0 0, 35px 50px, 130px 260px, 75px 110px;
}

Image

---

Advertise Boards On TRDConceptsDE
4/30/19, 1:42 pm Link to this post Email Pastor Rick   PM Pastor Rick Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator

Registered: 07-2005
Location: Texas
Posts: 241
Karma: -1 (+0/-1)
Reply ● Quote
Blue Slatt Background


/* CSS Background */
body {background:
linear-gradient(60deg, #9af 15%, transparent 25%) 5px 0,
repeating-linear-gradient(35deg, transparent 75%, #a98 80%),
linear-gradient(80deg, transparent 30%, #abc 40%, #def 60%, transparent 80%),
#0099ff;
background-size: 22px 8px;}

Image

---

Advertise Boards On TRDConceptsDE
4/30/19, 1:48 pm Link to this post Email Pastor Rick   PM Pastor Rick Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator

Registered: 07-2005
Location: Texas
Posts: 241
Karma: -1 (+0/-1)
Reply ● Quote
Diamond Silk Background


/* CSS Background */
body {background:
linear-gradient(27deg, #b7c6d2 3px, transparent 3px) 0 3px,
linear-gradient(207deg, #b7c6d2 3px, transparent 3px) 0 0,
linear-gradient(27deg, #9fadb9 3px, transparent 3px) 0 0,
linear-gradient(207deg, #9fadb9 3px, transparent 3px) 9px 6px,
linear-gradient(90deg, #9eadb3 12px, transparent 12px),
linear-gradient(#9eadb3 25%, #91A0AC 25%, #91A0AC 50%, transparent 50%, #91a0ac 75%, #91a0ac);
background-color: #9eadb9;
background-size: 15px 9px;}

Image

---

Advertise Boards On TRDConceptsDE
4/30/19, 1:50 pm Link to this post Email Pastor Rick   PM Pastor Rick Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator

Registered: 07-2005
Location: Texas
Posts: 241
Karma: -1 (+0/-1)
Reply ● Quote
Faded Daisies Background


/* CSS Background */
body {background:
/* circle pattern */
  radial-gradient(#F9F9F9 5%, transparent 5%) 0 0,
  radial-gradient(#E2E2E2 8%, transparent 8%) -15px 0,
  radial-gradient(#E2E2E2 8%, transparent 8%) 15px 0,
  radial-gradient(#E2E2E2 8%, transparent 8%) 0 -15px,
  radial-gradient(#E2E2E2 8%, transparent 8%) 0 15px,
/* triangle pattern */
  radial-gradient(#F9F9F9 5%, transparent 5%) 50px 50px,
  linear-gradient(65deg, #EAEAEE 3%, transparent 3%) -20px 0,
  linear-gradient(115deg, transparent 96%, #E2E2E2 96%) -20px 0,
  linear-gradient(115deg, #EAEAEE 3%, transparent 3%) 20px 0,
  linear-gradient(65deg, transparent 96%, #E2E2E2 96%) 20px 0,
  linear-gradient(335deg, #EAEAEE 3%, transparent 3%) 0 -20px,
  linear-gradient(25deg, transparent 96%, #E2E2E2 96%) 0 -20px,
  linear-gradient(25deg, #EAEAEE 3%, transparent 3%) 0 20px,
  linear-gradient(335deg, transparent 96%, #E2E2E2 96%) 0 20px;
background-size: 100px 100px;
background-color: #EDEDED;}

Image

---

Advertise Boards On TRDConceptsDE
4/30/19, 1:52 pm Link to this post Email Pastor Rick   PM Pastor Rick Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator

Registered: 07-2005
Location: Texas
Posts: 241
Karma: -1 (+0/-1)
Reply ● Quote
Quatrefoils Background


/* CSS Background */
body {
background-color:#D2FFD2;
background-image:
radial-gradient(circle closest-side, #D2FFD2 61%,transparent 62%),
radial-gradient(circle closest-side, transparent 85%, rgba(60,255,60,1) 86%,rgba(60,255,60,1) 99%, transparent 100%),
radial-gradient(circle closest-side, transparent 85%, rgba(60,255,60,1) 86%,rgba(60,255,255,1) 99%, transparent 100%);
background-size:100px 100px,100px 50px,50px 100px;
background-position:0 0;
}

Image

---

Advertise Boards On TRDConceptsDE
4/30/19, 1:54 pm Link to this post Email Pastor Rick   PM Pastor Rick Blog
 


Add a Reply

Page:  1  2  3 



You are not logged in (login)