title: Giving different wallpapers to a page
body: <p>I'm creating a page to describe each class of my RPG game in sections (mage, bard, assassin, etc). In each section I have an image and a description of the character, and for each section I want to give different wallpapers with a white layer with 0.5 opacity over the wallpaper but I don't know how.</p>
  
  <p>I tried adding different div tags for each section with different wallpapers but every new wallpaper covers all the page.</p>
  
  <p>I'm going to show the code so far and you can see the results <a href="https://i.stack.imgur.com/nZT3C.png" rel="nofollow noreferrer">here</a> and <a href="https://i.stack.imgur.com/JEOty.png" rel="nofollow noreferrer">here</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#titles{
      font-family: 'Germania One', cursive;
      margin-top: 10px;
      position: relative;
      margin-left: 50%;
      
  }
  body{
      background:url("wpp.jpg");
  
      background-size: 108%;
      background-repeat: no-repeat;
  }
  
  
  h1{
      color: black;
  }
  
  p{
      font-family: 'Germania One', cursive;
      font-size: 19px;
  }
  
  .mage-section{
      background-color: rgb(240, 248, 255, 0.7);   
      float: left;
      
  }
  
  .assassin-section{
   
  }
  
  
  .atributos{
    margin-top: 5%;
  }
  
  /* Atributo FORÇA*/
  
  .atributoForca{
      position: relative;
      margin-left: 0%;
      margin-top: -3px;
      margin-right: 0px;
      width:0;
  }
  
  #forca{
      font-size: 80px;
      font-family: 'Germania One', cursive;
      position: absolute;
      margin-left: 65px;
      margin-top: -58px;
      padding-right: 0px;
  
  }
  
  
  .informaForca{
      position: relative;
      top: 55px;
      bottom: 0;
      left: 5px;
      right: 0;
      text-align: center;
      color: black;
      visibility: hidden;
      opacity: 0;
      height: 60px;
      width: 60px;
      font-family: 'Germania One', cursive;
      font-size: 22px;
      /* transition effect. not necessary */
      transition: opacity .3s, visibility .2s;
      text-align: center;
  }
  
  
  .atributoForca:hover .informaForca{
      margin-top: 2%;
      visibility: visible;
      opacity: 1;            
  }
  
  /*Fim do atributo FORÇA*/
  
  /*Atributo DESTREZA*/
  
  .atributoDestreza{
      position: relative;
      margin-left: 40%;
      margin-top: -33px;
      width:0;
  }
  
  #destreza{
      font-size: 80px;
      font-family: 'Germania One', cursive;
      position: absolute;
      margin-left: 65px;
      margin-top: -61px;
      
  }
  
  .informaDestreza{
      position: relative;
      top: 55px;
      bottom: 0;
      left: -6px;
      right: 0;
      text-align: center;
      color: black;
      visibility: hidden;
      opacity: 0;
      height: 60px;
      width: 60px;
      font-family: 'Germania One', cursive;
      font-size: 22px;
      /* transition effect. not necessary */
      transition: opacity .3s, visibility .2s;
      text-align: center;
  }
  
  .atributoDestreza:hover .informaDestreza{
      margin-top: 2%;
      visibility: visible;
      opacity: 1; 
  }
  
  /*Fim do Atributo DESTREZA*/
  
  /*Atributo AGILIDADE*/
  
  .atributoAgilidade{
      position: relative;
      margin-left: 50%;
      margin-top: -33px;
      width:0;
  }
  
  #agilidade{
      font-size: 80px;
      font-family: 'Germania One', cursive;
      position: absolute;
      margin-left: 66px;
      margin-top: -61px;
  }
  
  .informaAgilidade{
      position: relative;
      top: 55px;
      bottom: 0;
      left: -2px;
      right: 0;
      text-align: center;
      color: black;
      visibility: hidden;
      opacity: 0;
      height: 60px;
      width: 60px;
      font-family: 'Germania One', cursive;
      font-size: 22px;
      /* transition effect. not necessary */
      transition: opacity .3s, visibility .2s;
      text-align: center;
  }
  
  .atributoAgilidade:hover .informaAgilidade{
      margin-top: 2%;
      visibility: visible;
      opacity: 1; 
  }
  
  /*Fim do atributo AGILIDADE*/
  
  /*Atributo INTELIGÊNCIA*/
  
  .atributoInteligencia{
      position: relative;
      margin-left: 60%;
      margin-top: -33px;
  }
  
  #inteligencia{
      font-size: 80px;
      font-family: 'Germania One', cursive;
      position: absolute;
      margin-left: -30px;
      margin-top: -29px;
  }
  
  .informaInteligencia{
      position: relative;
      top: 55px;
      bottom: 0;
      left: -15px;
      right: 0;
      text-align: center;
      color: black;
      visibility: hidden;
      opacity: 0;
      height: 60px;
      width: 60px;
      font-family: 'Germania One', cursive;
      font-size: 22px;
      /* transition effect. not necessary */
      transition: opacity .3s, visibility .2s;
      text-align: center;
  }
  
  .atributoInteligencia:hover .informaInteligencia{
      margin-top: 2%;
      visibility: visible;
      opacity: 1; 
  }
  
  /*Fim do atributo INTELIGÊNCIA*/
  
  /*Atributo INTELIGÊNCIA*/
  
  .atributoResistencia{
      position: relative;
      margin-left: 70%;
      margin-top: -33px;
  }
  
  #resistencia{
      font-size: 80px;
      font-family: 'Germania One', cursive;
      position: absolute;
      margin-left: -32px;
      margin-top: -27px;
  }
  
  .informaResistencia{
      position: relative;
      top: 55px;
      bottom: 0;
      left: -15px;
      right: 0;
      text-align: center;
      color: black;
      visibility: hidden;
      opacity: 0;
      height: 60px;
      width: 60px;
      font-family: 'Germania One', cursive;
      font-size: 22px;
      /* transition effect. not necessary */
      transition: opacity .3s, visibility .2s;
      text-align: center;
  }
  
  .atributoResistencia:hover .informaResistencia{
      margin-top: 2%;
      visibility: visible;
      opacity: 1; 
  }
  
  /*Fim do atributo RESISTÊNCIA*/
  
  /*Atributo FÉ*/
  
  .atributoFe{
      position: relative;
      margin-left: 80%;
      margin-top: -33px;
  }
  
  #fe{
      font-size: 80px;
      font-family: 'Germania One', cursive;
      position: absolute;
      margin-left: 47px;
      margin-top: -27px;
  }
  
  .informaFe{
      position: relative;
      top: 55px;
      bottom: 0;
      left: 20px;
      right: 0;
      text-align: center;
      color: black;
      visibility: hidden;
      opacity: 0;
      height: 60px;
      width: 60px;
      font-family: 'Germania One', cursive;
      font-size: 22px;
      /* transition effect. not necessary */
      transition: opacity .3s, visibility .2s;
      text-align: center;
  }
  
  .atributoFe:hover .informaFe{
      margin-top: 2%;
      visibility: visible;
      opacity: 1; 
  }
  
  /*Fim do atributo FÉ*/
  
  /*Atributo CARISMA*/
  
  .atributoCarisma{
      position: relative;
      margin-left: 90%;
      margin-top: -33px;
  }
  
  #carisma{
      font-size: 80px;
      font-family: 'Germania One', cursive;
      position: absolute;
      margin-left: 0px;
      margin-top: -27px;
  }
  
  .informaCarisma{
      position: relative;
      top: 55px;
      bottom: 0;
      left: -4px;
      right: 0;
      text-align: center;
      color: black;
      visibility: hidden;
      opacity: 0;
      height: 60px;
      width: 60px;
      font-family: 'Germania One', cursive;
      font-size: 22px;
      /* transition effect. not necessary */
      transition: opacity .3s, visibility .2s;
      text-align: center;
  }
  
  .atributoCarisma:hover .informaCarisma{
      margin-top: 2%;
      visibility: visible;
      opacity: 1; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;title&gt;Wikia&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link rel="shortcut icon" href="favicon.ico" /&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Germania+One" rel="stylesheet"&gt;
      &lt;link rel="stylesheet" type="text/css" media="screen" href="classes.css"&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
      
  
  &lt;/head&gt;
  &lt;body&gt;
    
    &lt;nav class="navbar navbar-expand-sm bg-dark navbar-dark"&gt;      
      &lt;a class="navbar-brand" href="#"&gt;
        &lt;img src="mg.jpg" alt="Logo" style="width:40px;" /&gt;
      &lt;/a&gt;
      &lt;!-- Links --&gt;
      &lt;ul class="navbar-nav"&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="rascunho.html"&gt;Battle RPG&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="criarPersonagem.html"&gt;Criar&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item dropdown"&gt;
          &lt;a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;Wikia&lt;/a&gt;
          &lt;div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"&gt;
            &lt;a class="dropdown-item" href="classes.html"&gt;Classes&lt;/a&gt;
            &lt;a class="dropdown-item" href="#"&gt;Lore&lt;/a&gt;
            &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
          &lt;/div&gt;  
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  
    &lt;!-- &lt;h1 style="text-align: center;"&gt;Here you can read and learn more about each one of the classes. &lt;/h1&gt;
      &lt;h1 style="text-align: center; padding-bottom: 20px;"&gt;It will help you to pick better if you're not familiar to the game&lt;/h1&gt; --&gt;     
    &lt;section class="mage-section"&gt;
      &lt;!-- &lt;div class="content"&gt; --&gt;
      &lt;img src="mage.png" alt="MAGE" id="mage" class="img-responsive" style="float: left; max-width: 100%;"&gt;
      &lt;h1 id="titles"&gt;The Mage&lt;/h1&gt;
      &lt;p&gt;Mages are students gifted with a keen intellect and unwavering discipline may walk the path of the Mage. The arcane magic available to magi is both great and dangerous, and thus is revealed only to the most devoted practitioners. To avoid interference with their spellcasting, magi wear only cloth armor, but arcane shields and enchantments give them additional protection. To keep enemies at bay, magi can summon bursts of fire to incinerate distant targets and cause entire areas to erupt, setting groups of foes ablaze. &lt;br&gt;Mages are students gifted with a keen intellect and unwavering discipline may walk the path of the Mage. The arcane magic available to magi is both great and dangerous, and thus is revealed only to the most devoted practitioners. To avoid interference with their spellcasting, magi wear only cloth armor, but arcane shields and enchantments give them additional protection. To keep enemies at bay, magi can summon bursts of fire to incinerate distant targets and cause entire areas to erupt, setting groups of foes ablaze. &lt;br&gt; Mages are students gifted with a keen intellect and unwavering discipline may walk the path of the Mage. The arcane magic available to magi is both great and dangerous, and thus is revealed only to the most devoted practitioners. To avoid interference with their spellcasting, magi wear only cloth armor, but arcane shields and enchantments give them additional protection. To keep enemies at bay, magi can summon bursts of fire to incinerate distant targets and cause entire areas to erupt, setting groups of foes ablaze.&lt;/p&gt;
    
    &lt;div class="atributos"&gt;  
      
      &lt;div class="atributoForca"&gt;
      &lt;img src="forca.png" alt="" style="position: absolute;" class="img-responsive"&gt;&lt;span class="informaForca"&gt;Força&lt;/span&gt;
      &lt;span id="forca"&gt; 2&lt;/span&gt;
      &lt;/div&gt;
  
      &lt;div class="atributoDestreza"&gt;
      &lt;img src="destreza.png" alt="" style="position: absolute;" class="img-responsive"&gt;&lt;span class="informaDestreza"&gt;Destreza&lt;/span&gt;
      &lt;span id="destreza"&gt;3&lt;/span&gt;
      &lt;/div&gt;
   
      &lt;div class="atributoAgilidade"&gt;
        &lt;img src="agilidade.png" alt="" style="position: absolute;" class="img-responsive"&gt;&lt;span class="informaAgilidade"&gt;Agilidade&lt;/span&gt;
       &lt;span id="agilidade"&gt;2&lt;/span&gt;
      &lt;/div&gt;
  
      &lt;div class="atributoInteligencia"&gt;
         &lt;img src="inteligencia.png" alt="" style="position: absolute;" class="img-responsive"&gt;&lt;span class="informaInteligencia"&gt;Inteligência&lt;/span&gt;
        &lt;span id="inteligencia"&gt;8&lt;/span&gt;   
      &lt;/div&gt;
  
      &lt;div class="atributoResistencia"&gt;
        &lt;img src="resistencia.png" alt="" style="position: absolute;" class="img-responsive"&gt;&lt;span class="informaResistencia"&gt;Resistência&lt;/span&gt;
        &lt;span id="resistencia"&gt;1&lt;/span&gt;
      &lt;/div&gt;
  
      &lt;div class="atributoFe"&gt;
        &lt;img src="fe.png" alt="" style="position: absolute;" class="img-responsive"&gt;&lt;span class="informaFe"&gt;Fé&lt;/span&gt;
        &lt;span id="fe"&gt;1&lt;/span&gt;
      &lt;/div&gt;
  
      &lt;div class="atributoCarisma"&gt;
        &lt;img src="carisma.png" alt="" style="position: absolute;" class="img-responsive"&gt;&lt;span class="informaCarisma"&gt;Carisma&lt;/span&gt;
        &lt;span id="carisma"&gt;2&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;button class="btn btn-success"  style="width: 250px; position: relative; margin-top: 4%; float: right; margin-right: 42px"&gt;ESCOLHER&lt;/button&gt;
  &lt;!-- &lt;/div&gt; --&gt;
  
  &lt;/section&gt;
  
  &lt;section class="assassin-section"&gt;
  
    &lt;img src="assassin.png" alt="Assassin" id="assassin" class="img-responsive" style="float: right; max-width: 100%; height:auto;"&gt;
      &lt;h1 id=""&gt;The Assassin&lt;/h1&gt;
      &lt;p&gt;Os assassinos são especialistas na aplicação de golpes rápidos e mortais, treinados nas macabras artes do assassinato, o que inclui infiltração, disfarces, conhecimentos sobre anatomia, uso de venenos e artes macabras.
        Uma curiosidade a respeito dos tipos artonianos é que estes sentem-se profundamente ofendidos com a alcunha de “assassino”, preferindo serem chamados de “removedores de pessoas inconvenientes”.
        Ataque Furtivo: quando atinge um alvo desprevenido ou flanqueado com um ataque corpo-a-corpo (ou à distância até 9m), o assassino causa +1d6 pontos de dano adicional. Uma criatura imune a acertos críticos também é imune a ataques furtivos.
        A cada nível ímpar seguinte, este dano aumenta para +2d6. Este dano adicional é cumulativo com a habilidade ataque furtivo de outras classes.
        Golpe Mortal: Se estudar a vítima por 3 rodadas consecutivas, atingi-la com um ataque furtivo corpo-a-corpo e causar dano, este ataque será capaz de nocautear ou matar o alvo (à sua escolha). O assassino deve gastar uma ação de movimento por turno para estudar a vítima, e não pode tirar os olhos dela em nenhum momento. A vítima também não pode perceber ou reconhecer o assassino como um de seus oponentes.
        Uma vez atingida e tendo sofrido dano, a vítima deve ser bem sucedida em um teste de Fortitude (CD 10 + nível de assassino + mod. Int) ou morrerá imediatamente. Caso tenha optado por não matar, a vítima ficará inconsciente por um nº de rodadas  = 1d6 + nível de assassino. Se passar no teste de Fortitude a vítima apenas recebe o dano do ataque furtivo.
        Após estudar a vítima, o assassino tem 3 rodadas para disferir o ataque mortal, caso fracasse, deverá estudar a vítima novamente para executar outro ataque.
        Usar Venenos: recebe o talento Usar Venenos.
        Resistência a Venenos: a partir do 2º nível o assassino recebe bônus +2 nos testes de Fortitude contra venenos. Resistência desenvolvida pela freqüência com que os manipula. No 6º nível este bônus aumenta para +4, e no 10º nível para +6.
        Anjo da Morte: A partir do 150º nível, o assassino passa a ser reconhecido entre as divindades da morte, recebendo a benção destas. Uma vítima do golpe mortal do assassino não pode ser ressuscitada pelas magias Reviver os Mortos ou Ressurreição (mas Desejo, Milagre ou Ressurreição Verdadeira funcionam normalmente).&lt;/p&gt;
  
  &lt;/section&gt;
  
  &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rEb8TK3gBgk5auZkwc6sHnwrGVJH8DuaLh.109773641.109773641.109773641vH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>