Immagine di sfondo CSS - Qual è l'uso corretto?

Qual è l'uso corretto della proprietà immagine di sfondo CSS? Le cose chiave che sto cercando di capire è

1. Deve 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. Qualsiasi altro punto di cui dovrei essere consapevole per assicurarmi che funzioni correttamente su tutti i browser conformi agli standard.

Il percorso può essere completo o relativo (ovviamente se l'immagine proviene da un altro dominio deve essere piena).

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

background-image: url(image.jpg);

O

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

Tuttavia, da W3 :

Alcuni caratteri che compaiono in un URI non quotato, come parentesi, caratteri di spazi bianchi, virgolette singole (') e virgolette doppie ("), 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 doppie o sfuggire ai caratteri.

1. No non hai bisogno di preventivi.

2. Si, puoi. Tuttavia, tieni presente che gli URL relativi vengono risolti dall'URL del tuo foglio di stile.

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

1) mettere le virgolette è una buona abitudine

2) può essere un percorso relativo, ad esempio:

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

cercherà la cartella delle immagini nella cartella da cui è stato caricato il CSS. Pertanto, se le immagini si trovano in un'altra cartella o all'esterno dell'albero delle cartelle CSS, è necessario utilizzare il percorso assoluto o relativo al percorso principale (a partire da /)

3) dovresti usare la dichiarazione completa per l'immagine di sfondo per farla funzionare in modo coerente nei browser conformi agli standard come:

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

I percorsi relativi vanno bene e le virgolette non sono necessarie. Un'altra cosa che può aiutare è usare la backgroundproprietà "scorciatoia" per specificare un colore di sfondo nel caso in cui l'immagine non si carichi 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 si ripeterà e in quale direzione (se non si specifica, il valore predefinito è ripetere in orizzontale e verticale) e anche la posizione dell'immagine rispetto al suo contenitore.

Se le tue immagini sono in una directory separata del tuo file css e vuoi che il percorso relativo inizi dalla radice del tuo sito web:

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

basta controllare la struttura della directory dove esattamente l'immagine è supponiamo che tu abbia una cartella css e una cartella images al di fuori della cartella css quindi dovrai usare "../ images / image.jpg" e funzionerà come ha fatto per me assicurati che struttura di directory.

non hai davvero bisogno di virgolette se diciamo che stanno usando l'immagine dal tuo file CSS che può essere

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

Non è necessario utilizzare le virgolette e puoi usare qualsiasi percorso ti piaccia!

Dai un'occhiata alle rispettive pagine di riferimento del sitepoint per l' immagine di sfondo e gli URI

1. Non deve essere tra virgolette ma puoi usarli se vuoi. (Penso che IE5 / Mac non supporti le virgolette singole).
2. È possibile sia relativo che assoluto; un percorso relativo è relativo al percorso del file css.

basta scrivere nel tuo file CSS come qui sotto

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