CSS Make Background-Image Use Font Character

Use HTML character as a background

Use the z-index property:

.background {
  position: absolute;
  z-index: -9999;
}

Text as background images for CSS

The problem is your plugin. You're applying the same class to all matched elements. I'm assuming you're calling it like this

$('.randbg').RandBG();

You have several options but I'd probably use the callback version of addClass()

$.fn.RandBG = function(options) {
    var settings = $.extend({
        classPrefix: "bg",
        count: 26
    }, options);

    return this.addClass(function() {
        return settings.classPrefix + Math.floor(Math.random() * settings.count);
    });
};

You should also remember to always return the jQuery collection (this) from plugin functions so they're chainable.

JSFiddle

Place a character as background in a div

I would set a line-height on the paragraps and set absolute position on the cross, like this:

.drop-box {  width: 300px;  height: 150px;  border: 1px solid black;  text-align: center;  position:relative;}.drop-box p{  line-height:50px;}.drop-box:before {  content: "+";  width: 100%;  height: 100%;  font-size: 3em;  line-height: 150px;  position:absolute;  left:0px;}

<div class="drop-box">  <p>TITLE</p>  <p>(drop here)</p></div>

Use Font Awesome Icons in CSS

You can't use text as a background image, but you can use the :before or :after pseudo classes to place a text character where you want it, without having to add all kinds of messy extra mark-up.

Be sure to set position:relative on your actual text wrapper for the positioning to work.

.mytextwithicon {
    position:relative;
}    
.mytextwithicon:before {
    content: "\25AE";  /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    left:-5px;
    position:absolute;
    top:0;
 }

EDIT:

Font Awesome v5 uses other font names than older versions:

For FontAwesome v5, Free Version, use: font-family: "Font Awesome 5 Free"
For FontAwesome v5, Pro Version, use: font-family: "Font Awesome 5 Pro"

Note that you should set the same font-weight property, too (seems to be 900).

Another way to find the font name is to right click on a sample font awesome icon on your page and get the font name (same way the utf-8 icon code can be found, but note that you can find it out on :before).

Is there a way to use use text as the background with CSS?

You can have an absolutely positioned element inside of your relative positioned element:

#container {
   position: relative;
}

#background {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: -1;
   overflow: hidden;
}

<div id="container">
    <div id="background">
    Text to have as background
    </div>
    Normal contents
</div>

Set background image using css

You just need to add that line of CSS

div.block-title { display: inline-block; }

<div class="col-lg-12">  <p>    <center><img src="#">      <div class="block-title">        <h3>Food & Travel</h3>      </div>    </center>  </p></div>

problem about css background image and fonts with hosting

Would it be possible to use absolute path for you?
Using absolute path is a good habit to avoid such problem.

I saw you said the link becomes /PATH/OF/CSS//your/specified/link then it might be the configuration of your hosting solution, alternatively you can use url like example.com/public_html/img/1364.webp.

For CSS background-image character face got cut off once the screen getting bigger

You can directly specify a max-width after which it should stop expanding since the face in the image is going out. So it can be done as -

const closeNav =  document.querySelector(".close-nav")
const getNav= document.querySelector(".nav")
const openNav = document.querySelector(".closetag")

closeNav.addEventListener ("click", function() {
    getNav.classList.remove('navigation-open');
});

 openNav.addEventListener("click",function(){
   getNav.classList.add('navigation-open')
 })

* {box-sizing: border-box;}

body {
  margin:0;
  font-family: 'Montserrat',sans-serif;
  font-size:1rem;
  color:#404040;
  line-height:1.6
}

h1, h2, strong {
  font-weight: 700;
}

.hero {
  background-image: url(https://upload.cc/i1/2020/08/16/BZimrY.jpg);
  background-repeat: no-repeat;
  background-size:cover ;
  color:#fff;
  max-width: 1250px;
  margin: auto;
  padding: 4em 0;
  background-position: bottom;
}

.accent-color {
  color:#ffe600
}

.hero-title {
  font-size:1.5rem;
  line-height:1.4;
  margin-bottom:0;
  margin-top: 5rem;
}

.hero > * {
  grid-column:2/-2
}

@media (min-width:600px) {
  .hero > * {
  grid-column:2/ span 2
}
  
}
.btn-primary {
  background-color: #ffe600;
  color:black;
  text-decoration:none;
  justify-self:start;
  align-self: center;
}

.btn {
  padding:0.5em 1.5em;
  margin-top:0.5em;
  font-weight:700;
}

/* =================
    general layout
====================*/
.main-grid {
  display: grid;
  grid-template-columns: minmax(1em,1fr) minmax(0px,500px) minmax(1em,1fr); 
   grid-gap: 0em 2em
}

@media (min-width: 600px){
  .main-grid { 
    grid-template-columns: minmax(1em,1fr) repeat(3,minmax(130px,320px)) minmax(1em,1fr)
    
  }
  
}
/* =================
   info section
==================*/

.info >* {
  grid-column:2/-2
}

.info {
  padding: 4em 0;
}

.info > h3 {
  text-align:center
}

@media (min-width: 600px) {
  .col {
    grid-column: span 1;
    }
  .col:first-child {
    grid-column:2/3
  }
}

/* =================
   footer section
==================*/

.footer >* {
  grid-column:2/-2
}

.social-item {
  list-style-type: none;
}

.footer {
  background-color: #ebebeb;
  text-align:center;
  padding: 1.5em;
}

ul.social-list {
    order:-1;
    padding:0;
    margin:0;
    display:flex;
    justify-content: center;
    letter-spacing:1em;
    font-size:1.5rem;
}

.social-link {
  color:black;
}

.social-link:hover,
.social-focuse{
  color: #777
}

.fa-facebook-square {
  margin-left:20px
}

.footer-main > * {
  opacity: 0.6
}

@media (min-width: 600px) {
  .footer-main {
     grid-column: 1 / 4;
     text-align:start;
     margin-left: 2em;
    }
  
  .social-list{
    grid-column:  4 / 6 ;
    grid-row: 1 / 3 ;
    justify-self: end;
    align-self: center;
  }
}

.logo-link {
  background-color: yellow;
  padding-top: 2em;
}

.nav-list {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
   list-style: none;
   margin: 0;
   padding: 0;
   height: 100%;
}

.nav-link {
  color:white;
  text-decoration:none;
  font-size: 2rem;
  font-weight:700;
  letter-spacing:1px;
}

.header-content {
    display: flex;
    grid-column: 2/-2;
}

header.main-grid {
    position: absolute;
    width: 100vw;
}
.nav {
  position:fixed;
  background-color: #000;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom 0;
  height: 100%;
  left: 100%;
  transform: translateX(0%);
  transition: 0.5s
}

.navigation-open {
    transform: translateX(-100%);
}

.nav-link:hover,
.nav-link:focus {
  color: yellow
}

.close-nav {
  background-color: #000;
  border:0;
  color:yellow;
  font-size:3rem;
  cursor:pointer;
  padding: .5em;
  position: absolute;
}

.fas {
  font-size:2.5em;
  color:white;
}

.closetag {
  position: absolute;
  right:1%;
  top:20%;
  background-color: #000;
  border:0;
  cursor: pointer;
  padding: .3em 1.5em;
  background-color: TRANSPARENT;
}

.close-nav:hover {
  color: white
}
.close-nav:focus,
.closetag:focus {
  outline: none;
  
}

.fas:hover {
  color:yellow
}

@media (min-width:600px) {
  button.closetag,
  .close-nav {
    display: none;
}
  .nav {
    background-color: transparent;
    position: initial;
        
    }
  .nav-list {
    flex-direction: row;
    justify-content: unset;
  }
  
  .nav-link {
    font-size:1.4rem;
    margin-left: 18px;
  }
  
  .header-content {
    align-items: center;
  }
  

 
 
}

<html>
<body>
  
<header class="main-grid">
 <div class="header-content">
   <button class="closetag"><i class="fas fa-bars"></i></button>
   <a class="logo-link" href="index.html">
      <img src="https://upload.cc/i1/2020/08/16/IS7eGa.png"alt="Sample Image">
   </a>
   <nav class="nav">
      <button aria-label= "Close navigation" class="close-nav">×</button>
      <ul class="nav-list">
        <li class="nav-item"><a href="https://cdpn.io/demi-chen/debug/LYNLrGx/YvkgOeEPvgEk" class="nav-link">home</a></li>
        <li class="nav-item"><a href="https://cdpn.io/demi-chen/debug/LYNLrGx/YvkgOeEPvgEk" class="nav-link">about us</a></li>
        <li class="nav-item"><a href="#" class="nav-link">contact</a></li>
      </ul>
   </nav>
  
  </div>
 </header> 
 
<main>
  
    <section class="hero main-grid">
      <h1 class="hero-title">The only marketing agency on <span class="accent-color"> a mission from God </span>, fully dedicated to increase your web traffic.</h1>
      <p class="subtitle">We’re two brothers from Chicago that are trying to pay back our debt. We can help you with <strong>SEO, SEM, content marketing</strong> and whatever else.</p>
      <a href="#" class="btn btn-primary"> contact us </a>
   </section>
  
  <section class="info main-grid">
    <div class="col">
    <h3>About Us</h3>   
    <p>We grew up in downtown Chicago, and we used to play in a band. <strong>Jake loves fried chicken, and Elwood loves dry white toast.</strong></p>
    </div>

    
    <div class="col">
    <h3>Our skills</h3>
    <p>Elwood is an expert in<strong> SEO, SEM, and driving from the police</strong>. Jake is our <strong>social media specialist</strong>, and he has an amazing voice.</p>
    </div>
    
    <div class= "col">
    <h3>Get in touch</h3>
    <p>Send us an email with some info about what help you need and <strong>we’ll drive over to your place</strong> in our Bluesmobile the following day to discuss the deal.</p>
     </div>
    
  </section>
  
  </main>
  
  <footer class="footer main-grid">
    <div class="footer-main">
      <h3>Jake&Elwood</h3>
      <p>Two brothers from Chicago that are just trying to pay back their debt by helping others with their SEO, SEM, and Content Marketing needs.</p>
      <p>© Jake&Elwood 2019</p>
    </div>
    
    <ul class="social-list"> 
      <li class="social-item"><a href="#" class="social-link"><i class="fab fa-facebook-square"></i></a></li>
      <li class="social-item"><a href="#" class="social-link"><i class="fab fa-twitter"></i></a></li>
      <li class="social-item"><a href="#" class="social-link"><i class="fab fa-instagram"></i></a></li>
    </ul>
    
  </footer>

  
  
  
  
  </body> 
</html>