How can I make section background full size?-CodePudding

I want to make the background of the section full size. I use bootstrap.

this is what i have now

this is what i need

The code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<section >
  <div >
    <div >
      <h1 >Istorija</h1>
      
      <p >Žmonijai išnykus, mistiškai pradeda formuotis naujas pasaulis kitoje visatos erdvėje. Ten užsimezgusi gyvybė buvo gana primityvi. Ne, tai nebuvo vienaląsčiai organizmai nesugebantys mąstyti daugiau negu to reikia išgyvenimui, tačiau apie savo planetos
        pavadinimą jie net nemąstė, jiems ji buvo mistiška ir neištirta, dėl to visi ją vadino paprastai - Mistinis pasaulis. Šis pasaulis susidarė iš 4 bendruomenių-rasių išsibarsčiusių jame. Šios rasės gyveno atskiruose žemynuose ir puoselėjo savo miestelius.
        Apsilankius vienos ar kitos rasės gyvenamosiose vietose, galima buvo pamatyti unikalius, išskirtinius statinius atitinkančius rasės tradicijas, gabumus ir gyvenimo būdą. Mistinio pasaulio gyventojai turėjo tikslą būti geriausiems ir stengėsi bendradarbiauti
        vieni su kitais tam, kad kiekvieni iš jų sukurtų jaukų, įdomų, savo neįtikėtiną rasės miestą. Taigi, klestinčių rasių pavadinimai: Haflingai, Tabaksiai, Uritonai ir Minotaurai.</p>
    </div>
  </div>
  </div>
</section>

CodePudding user response：

I add a class cover-section in your HTML as below.

.cover-section {
  background: url(https://via.placeholder.com/800) center center no-repeat;
  background-size: cover
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div >
  <div >
    <div >
      <div >
        <h1 >Istorija</h1>
        <p >
          Žmonijai išnykus, mistiškai pradeda formuotis naujas pasaulis kitoje
        </p>
      </div>
    </div>
  </div>
</div>

if you want it to be with some overlay to it mate, no worries

 .cover-section {
    background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(../to/img/) center center no-repeat;
    background-size : cover;
   }

CodePudding user response：

You can override the bootstrap height and width as follows '''.classHere{height: 100% !important; width:100% !important;}

''' use !important sparingly as it overrides everything in that id/class/element and replaces the values with the new established value.