css sprite come inserirlo?

[alfeo]

sto perdendo la testa per modificare il template mettendoci le immagine sprite<qualcuno mi può indirizzare sento che mi sto perdendo in fesserie...
allora nel css del template ora c'è:

Codice: [Seleziona]

#bgr {
    padding: 0;
    margin: 0;
    background: transparent url(../images/bgr.png) top center repeat-y;
}
ho creato l'immagine sprite.png inserendo tutte le immagini e l'immagine in oggetto equivale alla posizione width:89px; height:128px; background-position:-106px -2px;

quindi dovrei cambiare il codice in:

Codice: [Seleziona]

#bgr {
     padding: 0;
     margin: 0;
     background: transparent url(../images/sprite.png) width:89px; height:128px; background-position:-106px -2px; top center repeat-y;
 }Ma il problema è che non funziona... l'immagine non si sposta nella posizione che scrivo... devo inserire qualcos altro?

[ariess]

hai inserito abbastanza, ma nel modo sbagliato....
ricontrolla la sintassi e sopratutto i ;

[alfeo]

io onestamente vado ad intuito di programmazione non ci capisco nulla, meglio così?

Codice: [Seleziona]

#bgr {
    padding: 0;
    margin: 0;
    background: transparent;
    background-image:url(../images/sprite.png);
    background-position:-106px -2px;
    background-position:top center;
    background-repeat:repeat-y;
}

[ariess]

...molto meglio.

solo che, o usi:
    background-position:-106px -2px;

o usi quest'altro:
    background-position:top center;


non entrambi insieme 

....e togli
        background: transparent;
 

[alfeo]

Quindi ricapitolando basta che al posto del codice CSS

Codice: [Seleziona]

#bgr {
    padding: 0;
    margin: 0;
    background: transparent url(../images/bgr.png) top center repeat-y;
}

metto

Codice: [Seleziona]

#bgr {
    padding: 0;
    margin: 0;
    background-image:url(../images/sprite.png);
    background-position:-106px -2px;
    background-repeat:repeat-y;
}
questo vale per tutte le immagini che inserisco nel css e basta? non si deve modificare nessun file php?

[ariess]

esatto.

volendo puoi scrivere anche

Codice: [Seleziona]

#bgr {
    padding: 0;
    margin: 0;
    background: url(../images/sprite.png)repeat-y -106px -2px transparent;
}
scritto in modo più compatto, ma ha lo stesso effetto.

[alfeo]

Niente ho provato ad inserire qual codice ma non funge, forse sono io che non riesco a capire qualcosa...
ora do tutte le informazioni possibili e immaginabili.
Il template è td zanet
ho inserito l'immagine sprite.png nella cartella delle immagini (è ancora lì se volete provare con pagespeed a modificare al volo io non ci sono nemmeno riuscito)
ho sostituito il codice

Codice: [Seleziona]

#left h3, #right h3{font-family:Tahoma, Verdana, Arial, sans-serif;width:auto;color:#454545;font-size:11px;height:28px;text-decoration:none;text-align:left;padding:0 10px;background:url(../images/h3.png) repeat-x left top;font-weight:bold;line-height:26px;margin:5 0 5 -5px;}con

Codice: [Seleziona]

#left h3, #right h3{font-family:Tahoma, Verdana, Arial, sans-serif;width:auto;color:#454545;font-size:11px;height:28px;text-decoration:none;text-align:left;padding:0 10px;background:url(../images/sprite.png) repeat-x 0 -134px;font-weight:bold;line-height:26px;margin:5 0 5 -5px;}ma niente non funziona
l'immagine è in ..image/sprite.png le coordinate sono background-position: 0 -134px; width: 1px; height: 27px;
Qualcuno riesce a far uscire questa immagine? Per tutte il resto vedo io ma non riesco a cominciare

[Criztian]

Inizia procedendo per gradi:
- rimuovi la parola chiave transparent e vedi se funziona
- riparti da un codice inline minimale e aggiungi un pezzo alla volta verificando cosa succede ad ogni passo

Ovviamente se non ti visualizza nulla anche con un codice ridotto al minimo vuol dire che hai sbagliato qualcosa all'origine.

Se metti solo l'immagine con width e height definite da te funziona?

Altrimenti considera che se lavori con valori assoluti non dovresti usare un valore negativo (-134px). Prova togliere il segno negativo come prima cosa e vedi cosa succede.
Gli assi iniziano in alto a sinistra dell'immagine e scendono in positivo.
In caso specifica "position: absolute;" o "relative;" in base alle tue necessità. Se hai già assegnato una posizione nell'immagine in precedenza allora potrai spostarti con "relative", ma solo dopo. Credo che non sia il tuo caso, quindi prova con absolute.

[alfeo]

cancellando tutto e scrivendo solo

Codice: [Seleziona]

url("../images/sprite.png") repeat scroll transparent[code][b][/code]
l'immagine si vede ma non mi considera la posizione
se aggiungo la posizione così

Codice: [Seleziona]

url("../images/sprite.png") repeat scroll 0 -134px transparentnon si vede piu nemmeno il background se invece metto solo lo 0 si vede una strisciolina
Sto impazzendo dove sbaglio?

ci sono aggiornamenti mi prende la posizione del backround ma la grndezza no e di conseguenza non mi ripete solo una porzione delllo sprite.png ma tutto lo sprite completo.
come dico al css la grandezza dell'immagine da moltiplicare? (repeat)