Inserire un'immagine di sfondo in CSS (Twitter Bootstrap)

Question

Come posso aggiungere uno sfondo di immagini al mio sito web?

body { 
    margin: 0; 
    background: url(background.png); 
    background-size: 1440px 800px; 
    background-repeat:no-repeatdisplay: compact; 
    font: 13px/18px "Helvetica Neue", Helvetica, Arial, sans-serif; 

Ho fatto molto ma non compare nulla sulla mia pagina. Sono un principiante CSS.

Aggiornato:

body { 
margin: 0; 
background-image: url(.../img/background.jpg); 
background-size: 1440px 800px; 
background-repeat:no-repeat; 
display: compact; 
font: 13px/18px "Helvetica Neue", Helvetica, Arial, sans-serif; 

Answer 1

inserire l'URL di fondo tra virgolette.

Dovrebbe essere background: url('background.png');

Vedi here per demo funzionante.

Hai anche un problema con il background-repeat line manca un punto e virgola tra due dichiarazioni. Se il tuo background è veramente piccolo, non lo vedrai a causa di quel problema.

solo per aggiornare sulla soluzione, tra le altre questioni, il file di sfondo veniva refrenced con .../background.jpg quando avrebbe dovuto essere ../background.jpg (2 punti, non 3).

Answer 2

non è il problema la seguente riga non è corretta, come la dichiarazione per background-repeat non si chiude prima del prossimo economico display ...

background-repeat:no-repeatdisplay: compact; 

Qualora non essere questo

background-repeat:no-repeat; 
display: compact; 

l'aggiunta o la rimozione di preventivi (nella mia esperienza) non fa alcuna differenza se l'URL è corretto. Il percorso dell'immagine è corretto? Se si attribuisce un percorso relativo a una risorsa in un CSS, questo è relativo al file CSS, non al file che include il CSS.

Answer 3

La tua immagine è nella stessa cartella/directory del tuo file css? In tal caso, l'URL dell'immagine è corretto. Altrimenti, non lo è.

Se per caso la struttura delle cartelle è in questo modo ...

pagina web
-index.html
-css
- - style.css
- immagini
- - background.png

poi fare riferimento l'immagine sul vostro file CSS si dovrebbe utilizzare il seguente percorso:

../images/background.png

Quindi sarebbe lo sfondo: url ('../ images/background.png');

La logica è semplice: andare su una cartella digitando "../" (tutte le volte che è necessario). Scendi una cartella specificando la cartella in cui desideri andare.

Answer 4

Se si aggiunge il seguente è possibile impostare il colore di sfondo o l'immagine (il vostro css)

html { 
    background-image: url('http://yoursite/i/tile.jpg'); 
    background-repeat: repeat; 
} 

.body { 
    background-color: transparent; 
} 

Questo perché BS applica una regola CSS per il colore di sfondo e anche per la classe .container.

Answer 5

L'aggiunta di un'immagine di sfondo su html, body o un elemento wrapper per ottenere un'immagine di sfondo causerà problemi con il padding. Controlla questo biglietto https://github.com/twitter/bootstrap/issues/3169 su github. Il commento di ShaunR e anche una delle risposte dei creatori a questo. La soluzione data nel ticket creato non risolve il problema, ma almeno fa andare le cose se non si utilizzano le funzionalità di risposta.

Supponendo che si sta utilizzando contenitore senza funzioni reattive, e dispone di una larghezza di 960px, e vuole raggiungere 10px padding, si imposta:

.container { 
    min-width: 940px; 
    padding: 10px; 
} 

Answer 6

E se non è possibile ripetere l'immagine di sfondo (per motivi estetici), quindi questo pratico plugin JQuery estenderà l'immagine di sfondo a adattandosi alla finestra.

Backstretch http://srobbin.com/jquery-plugins/backstretch/

Funziona alla grande ...

~ Cheers!

Answer 7

Per ulteriori modularità e nel caso in cui si hanno molte immagini di sfondo che si desidera incorporare dove si vuole è possibile per ogni immagine creare una classe:

.background-image1 
{ 
background: url(image1.jpg); 
} 
.background-image2 
{ 
background: url(image2.jpg); 
} 

e quindi inserire l'immagine dove vuoi con l'aggiunta di un div

<div class='background-image1'> 
    <div class="page-header text-center", style='margin: 20px 0 0px;'> 
     <h1>blabaaboabaon</h1> 
    </div> 
</div> 

Answer 8

body { 
    background-image: url(your image link); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment:fixed; 
    background-size: cover; 
    background-color: #464646; 
} 

Answer 9

il problema può essere anche l'ordinamento delle vostre importazioni foglio di stile. Ho dovuto spostare l'importazione del foglio di stile personalizzato al di sotto dell'importazione bootstrap.