Sfondo completo del corpo con Twitter Bootstrap

Sto provando a lavorare su un nuovo progetto utilizzando il framework Bootstrap di Twitter, ma sto riscontrando un problema. Voglio uno sfondo completo del corpo, ma lo sfondo sembra essere limitato all'altezza del contenitore div. ecco il codice HTML/CSS:Sfondo completo del corpo con Twitter Bootstrap

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset='UTF-8'> 
     <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'> 
     <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css"> 
     <title>Bootstrap Issue</title> 
     <style> 
      body { background: black; } 
      .container { background: white; } 
     </style> 
    </head> 
    <body> 
     <div class="container"> 
      <h1> Hello, World!</h1> 
     </div> 
    </body> 

</html>

Come posso ottenere che il corpo occupi l'intero schermo?

fonte

2011-09-27 GSto

È necessario aggiungere questo:

html { background: transparent }

O, impostare la "pagina di sfondo" (background: black) su html invece, che è bene fare.

Perché? All'interno Bootstrap, c'è questo:

html,body{background-color:#ffffff;}

(tenete a mente il valore di default background è transparent)

Per ulteriori informazioni sul motivo per cui questo importa, vedere: What is the difference between applying css rules to html compared to body?

Si noti che questo non è più un IS problema con Bootstrap 3+.

fonte

2011-09-27 13:14:49 thirtydot

Presumibilmente, ha già annullato il colore del bootstrap per lo sfondo. –

@ EvanCarroll: Sì, lo era, ma non funzionava per lui. Non stai capendo il problema che stava ponendo questa domanda. – thirtydot

Imposta l'altezza di html e corpo per essere al 100% nel CSS.

html, body { height: 100%; }

Quindi dovrebbe funzionare. Il problema è che l'altezza del corpo viene calcolata automaticamente come l'altezza del contenuto, piuttosto che l'altezza dell'intero schermo.

fonte

2011-09-27 12:18:08

Questo quasi funziona, ma se hai un padding-top: 60px (per evitare che la barra di navigazione appaia sopra il contenitore in alto), questo crea un'altezza extra di 60px in basso, che non ottiene il sfondo. Come facciamo "100% -60px" in css? – aalaap

EDIT: Questo è fattibile usando jQuery - $ ("body"). Css ("height", ($ (window) .height() - 60) + "px"); Qualcuno ha un metodo CSS puro per raggiungere questo obiettivo? – aalaap

html, corpo { altezza: 100%;/* GARANTISCE CHE QUESTO È PRIMO */ altezza minima: 100%; } – DrewRobertson93

/* qui è una soluzione CSS puro */

<style type="text/css"> 
     html, body { 
     height: 100%; 
     width: 100%; 
     padding: 0; 
     margin: 0; 
     } 

     #full-screen-background-image { 
     z-index: -999; 
     min-height: 100%; 
     min-width: 1024px; 
     width: 100%; 
     height: auto; 
     position: fixed; 
     top: 0; 
     left: 0; 
     } 

     #wrapper { 
     position: relative; 
     width: 800px; 
     min-height: 400px; 
     margin: 100px auto; 
     color: #333; 
     } 

     a:link, a:visited, a:hover { 
     color: #333; 
     font-style: italic; 
     } 

     a.to-top:link, 
     a.to-top:visited, 
     a.to-top:hover { 
     margin-top: 1000px; 
     display: block; 
     font-weight: bold; 
     padding-bottom: 30px; 
     font-size: 30px; 
     } 

    </style> 
    <body> 
    <img src="/background.jpg" id="full-screen-background-image" /> 
    <div id="wrapper"> 
    <p>Content goes here...</p> 
    </div> 
</body>

fonte

2013-06-07 02:33:17

funziona per me, grazie! – Juck

<style> 
     body { background: url(background.png); } 
     .container { background: ; } 
</style>

questo funziona per un'immagine di sfondo, se lo vuoi

fonte

2013-07-01 21:37:28 cflo

migliore soluzione sarebbe

.content{ 
    background-color:red; 
    height: 100%; 
    min-height: 100vh; 
}

sua assume automaticamente l'altezza veiwport (vh) nel bootstrap.

fonte

2015-08-03 05:49:54

Sfondo completo del corpo con Twitter Bootstrap

risposta

Problemi correlati