Aggiungi immagine di sfondo nella riga Bootstrap

Question

Vorrei inserire un'immagine di sfondo a tutta larghezza su questa parte della mia pagina. Qualcuno potrebbe dirmi quale regola CSS dovrei seguire? Perché per quanto ne so non puoi inserire un'immagine di sfondo all'interno di una riga. grazie

<header> 
 
     <div class="container"> 
 
      <div class="row"> 
 
       <div class="col-lg-12"> 
 
        <img class="img-responsive" src="img/profile.png" alt=""> 
 
        <div class="intro-text"> 
 
         <span class="name">HEADING</span> 
 
         <hr class="star-light"> 
 
         <span class="skills">TEXT</span> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </header>

Answer 1

Quando si desidera aggiungere un'immagine di sfondo, <img> non è la strada da percorrere. Utilizzare la proprietà background-image.

<header> 
    <div class="container"> 
    <div class="row" 
     style="background:transparent url('img/profile.png') no-repeat center center /cover"> 
     <div class="col-lg-12"> 
     <div class="intro-text"> 
      <span class="name">HEADING</span> 
      <hr class="star-light"> 
      <span class="skills">TEXT</span> 
     </div> 
     </div> 
    </div> 
    </div> 
</header> 

Si prega di notare che l'aggiunta di stile in linea non è consigliata, l'ho usato dimostrativo qui. Il modo corretto per dare uno stile al div è quello di aggiungere una classe specifica o un ID e di modificarlo all'interno dei file CSS.

Nello snippet precedente ho utilizzato la proprietà stenografica background per impostare background-image. Questa stenografia consente di impostare lo sfondo color, image, position, repeat, origin, clip e size in una singola dichiarazione. Devono essere in questo ordine. È possibile saltare uno di essi e size deve essere preceduto da un prefisso /.

Suggerimento: per ricordare il loro ordine uso il termine procs (dovrebbe essere ciprocs, ma procs è più facile da associare e il fatto che il colore e l'immagine sono i primi due è anche facile).

Answer 2

È possibile impostare nel file css la proprietà background-image: url('img.png') per definirlo.

Per ulteriori opzioni dare un'occhiata here.