Posizionamento immagine in chat

[Lucarella]

Salve a tutti, rieccomi con un nuovo problema
Nel mio forum ho installato questa shoutbox ma più precisamente la versione Pro, la quale ha delle opzioni in più, tra cui poter inserire un immagine di sfondo alla chat.
Funziona tutto correttamente, tranne proprio la funzione dell'immagine di sfondo, perchè non riesco a regolarla come vorrei e vi spiego il perchè...
Di default, ogni immagine inserita viene ripetuta quindi, per aggirare il problema, si deve usare un immagine abbastanza grande, solo che anche con immagini grandi il ripetersi avviene sempre, anche se più contenuto... Vi mostro qualche esempio:
Questa è con un'immagine 200x200


Mentre questa è con un immagine 1280x427


Come noterete, questa si ripete una sola volta ed inizia da dove ho messo la riga rossa, facendomi di fatto comparire al centro la scritta, che io vorrei tutta  a destra, come è nell'immagine originale


Ho fatto molte prove, creando immagini molto più lunghe ma il risultato è sempre lo stesso, si ripetere sempre allo stesso punto.

Ovviamente ho chiesto supporto a chi ha scritto sto mode mi disse che potevo regolare tutto tramite il css, ma le mie conoscenze non me lo permettono. Gli ho anche chiesto supporto pubblicamente sul suo forum, sollecitandolo più volte, ma dopo circa un mese non ho ricevuto nessuna risposta

Potrei anche lasciarla così, al centro, solo che spesso le scritte in chat vanno a sovrapporsi sopra diventando poco leggibile e brutto esteticamente perciò vorrei che andasse tutta a destra... Avete dei suggerimenti ?
Allego il css della chat, se serve altro ditemelo 

Grazie

[Flavio93Zena]

Mi son dovuto registrare
Aggiungi:

Codice Seleziona Espandi

div#shoutbox { background-repeat: no-repeat;
    background-size: contain;
    background-position-x: right;
    background-color: #000; }
Alla fine del file (aggiusta l'indentazione del testo, lo sto facendo di fretta e tab non funziona qui)

E' responsive, per quanto possibile.

[Lucarella]

Se per aggiustarlo intendevi renderlo così ?

Codice Seleziona Espandi

div#shoutbox {
     background-repeat: no-repeat;
         background-size: contain;
         background-position-x: right;
         background-color: #000;
}
Purtroppo il posizionamento non cambia, rimane come prima Altre idee ?

[Flavio93Zena]

Non vedo il codice aggiunto al file infatti...

[Lucarella]

L'ho rimesso

[Flavio93Zena]

Se ti scrivo alla fine del file, intendo proprio ALLA FINE del file, non prima dell'ultima parentesi

Codice Seleziona Espandi

div#shoutbox {
     background-repeat: no-repeat;
         background-size: contain;
         background-position-x: right;
         background-color: #000;
}

}
Questo non è ciò che ho scritto

[Lucarella]

Credevo che l'ultima parentesi doveva restare
Cmq l'ho tolta ora, ma rimane sempre così...

[Flavio93Zena]

Ma te mi vuoi far impazzire...
Se ti scrivo AGGIUNGILO ALLA FINE è diverso da CANCELLA LA PARENTESI!!!
Te lo allego

[Lucarella]

Oh pardon... Avevo pensato diversamente 
L'ho messo su e ora il risultato è quello che volevo, ora devo solo giocare un pò per migliorare il posizionamento della scritta.
Grazie mille Flavio, avanzi un caffè

[Flavio93Zena]

L'immagine si allinea col bordo a destra, vedi tu di quanti pixel la vuoi far spostare basta che avvicini il testo al bordo
E menomale ora funziona

[Lucarella]

Si ho visto, ed infatti alla fine vi si sovrappone la barra come puoi vedere. Credo che spostarla un pò verso sinistra risolverà il problema.

Grazie ancora

[Flavio93Zena]

La soluzione più elegante sarebbe stata fare un'immagine solo con la scritta e la trasparenza, inserire lo sfondo nero (come ho fatto), e regolare i margini con quello, ma è un po' più complicato. E' un problema annoso lo sfondo con le immagini...

[Lucarella]

Per ora sono riuscito ad inserirla come volevo, ma cmq farò altre prove, anche come dici tu.  Alla fine dovrò pur trovare il posizionamento giusto

[Lucarella]

Riesumo questo topic per un altro aiuto al riguardo...
Il codice che mi scrisse Flavio funziona bene per quello che chiesi, ora invece si è presentata la possibilità di inserire un immagine per lo sfondo di tutta la finestra della chat, ho fatto alcune prove e ci sono riuscito modificando il valore background-position-x: right in center.
L'immagine viene centrata come volevo ,però ho il problema che, se vado a ridimensionare la finestra del browser, l'immagine si restringe nella parte inferiore e ai lati e si vede uno spazio nero ,perciò vi chiedo, come evitare di farla restringere e renderla "fissa" ?

Così la vedo a browser tutto aperto


Così è quando lo ridimensiono


Grazie

[Flavio93Zena]

Potresti con background-size: cover, ma si distorcerebbe l'immagine. Ti serverebbe un'immagine con una proporzione migliore.
E non ho visto la risposta fino all'aggiornamento... Boh.