CSS background-image - Qual è l'uso corretto?

Question

Qual è l'uso corretto della proprietà background-image CSS? Le cose fondamentali che sto cercando di capire è

1. Ha bisogno di essere tra virgolette cioè .: background-image: url('images/slides/background.jpg');
2. Può essere un percorso relativo (come sopra) o deve essere un URL completo?
3. Eventuali altri punti di cui dovrei essere a conoscenza per assicurarsi che funzioni correttamente su browser conformi agli standard.

Answer 1

il percorso può essere sia completo o relativo (ovviamente se l'immagine è di un altro dominio deve essere completo).

Non è necessario utilizzare le virgolette nell'URI; la sintassi può essere sia:

background-image: url(image.jpg); 

O

background-image: url("image.jpg"); 

Tuttavia, da W3:

Alcuni personaggi che compaiono in un URI non quotati, come ad esempio parentesi, spazi vuoti, virgolette singole (') e doppi apici ("), devono essere sottoposti a escape con una barra rovesciata in modo che il valore URI risultante sia un token URI:' \ (',' \) '.

Quindi in casi come questi è necessario utilizzare virgolette o virgolette o sfuggire ai caratteri.

Answer 2

Non è necessario utilizzare le virgolette ed è possibile utilizzare qualsiasi percorso che ti piace!

Answer 3

1. No non è necessario preventivi.

2. Sì, è possibile. Ma ricorda che gli URL relativi sono risolti dall'URL del tuo foglio di stile.

3. Meglio non utilizzare le virgolette. Penso che ci siano clienti che non li capiscono.

Answer 4

1) mettere le virgolette è una buona abitudine

2) può essere percorso relativo, ad esempio:

background-image: url('images/slides/background.jpg'); 

cercherà la cartella immagini nella cartella da cui è stato caricato css. Quindi, se le immagini sono in un'altra cartella o fuori dall'albero delle cartelle CSS, dovresti usare il percorso assoluto o relativo al percorso radice (iniziando con /)

3) dovresti usare la dichiarazione completa per background-image per farlo comportarsi in modo coerente attraverso norme browser conformi piace:

background:blue url('/images/clouds.jpg') no-repeat scroll left center; 

Answer 5

Date un'occhiata alle rispettive pagine di riferimento per SitePoint background-image e URIs

1. Non deve essere tra virgolette, ma può usarli, se volete. (Penso che IE5/Mac non supporta le virgolette singole).
2. Sia relativo sia assoluto è possibile; un percorso relativo è relativo al percorso del file css.

Answer 6

I percorsi relativi sono soddisfacenti e le quotazioni non sono necessarie. Un'altra cosa che può aiutare è usare la proprietà "stenografia" background per specificare un colore di sfondo nel caso in cui l'immagine non venga caricata o non sia disponibile per qualche motivo.

#elementID { 
    background: #000 url(images/slides/background.jpg) repeat-x top left; 
} 

Si noti inoltre che è possibile specificare se l'immagine sarà ripetuta e in quale direzione (se non si specifica, il valore predefinito è di ripetere orizzontale e verticale), e anche la posizione dell'immagine rispetto al suo contenitore.

Answer 7

Se le immagini sono in una directory separata del file css e si desidera che il percorso relativo inizia dalla radice del vostro sito web:

background-image: url('/Images/bgi.png'); 

Answer 8

basta controllare la struttura di directory in cui esattamente immagine è supponiamo di avere una cartella css e una cartella di immagini al di fuori della cartella css, quindi dovrai usare "../ images/image.jpg" e funzionerà come per me, assicurandoti solo la struttura della directory.

Answer 9

basta scrivere nel file css come muggito

background:url("images/logo.jpg") 

Answer 10

voi davvero non hanno bisogno virgolette se diciamo uso utilizza l'immagine dal vostro file CSS può essere

{background-image: url(your image.png/jpg etc);}