Immagine di sfondo in primo piano.

[radiodelmomento]

Ciao a tutti!
Avrei bisogno di impostare un'immagine di sfondo in primo piano, ovvero sopra a tutto.
Ecco il codice che ho per ora.

<td style="background: url(url.png) bottom right no-repeat">

Se c'è qualche problema di "compatibilità" vi prego di segnalarmelo, l'immagine "url.png" dovrebbe comparire in basso a destra (con IE9 e Mozilla è tutto OK).
Grazie.

ciao...non capisco quale sia il tuo problema ;) se ti preoccupi per la compatibilità...a me sembra compatibile...verificalo con chrome (se ce l'hai) oppure posta il link che verifico io (o il primo che legge xD)

ciaooo

[karl94]

Che? Una immagine di sfondo in primo piano? Cosa mai dovrebbe essere?
Inoltre vedo nel codice una tabella, sei sicuro di averne davvero bisogno?

[radiodelmomento]

Devo mettere quell'immagine in basso a destra sopra agli elementi presenti in quel <td>.
Ho pensato di fare uno sfondo in primo piano.
Grazie.

[karl94]

Se una immagine è messa come sfondo non può stare in primo piano! Al più puoi mettere in primo piano un elemento che ha quest'ultimo un immagine per sfondo.
Comunque non mi è ancora chiaro il problema, potresti allegare l'indirizzo di una pagina di esempio con relativa descrizione?

[radiodelmomento]

Ecco qui.
Nel <td> delle immagini in HD ho messo, in basso a destra, il simbolo "HD".
Grazie.

Soluzione 1 - Come chiedi tu

All'interno del td fai un div che ha come sfondo l'immagine (es. trollface), poi all'interno di questo div inserisci semplicemente il tag img con l'immagine "hd" che posizionerai in basso a destra con i css

Soluzione 2 - Come farei io

Modifica le immagini aggiungendovi fisicamente il timbro hd. In questo modo basta inserire il tag img nel td


Ciao

[karl94]

Puoi usare gli pseudo elementi after e before per aggiungere l'immagine e posizionarla all'interno della cella. Dovrai però usare un elemento ausiliario (come per esempio il già presente a) poiché non è possibile applicare la proprietà display sulla cella.
Comunque, perché hai usato una tabella?

[radiodelmomento]

Grazie ad entrambi.
La prima soluzione di projectFede mi sembra buona, poiché la seconda l'avevo già usata e c'era il problema che a seconda delle dimensioni dell'immagine variava la posizione del "timbro" all'interno del <td>.
Ma c'è il problema dei link, per cui mi servirebbe un'altra soluzione.
karl94 non ho capito cosa faresti tu.

[karl94]

Cos'è che non ti è chiaro? Non conosci il funzionanmento degli pseudo elementi?

[radiodelmomento]

Sì, ho visto alcuni esempi senza capire cosa c'entri con quello che vorrei ottenere io.

[karl94]

Beh, un pseudo elemento è un elemento che non esiste nell'albero del documento, ma è generato dal foglio di stile. Nelle attuali specifiche CSS esistono solo gli pseudo elementi before e after, che identificano rispettivamente il pseudo-elemento prima e dopo il contenuto dell'elemento in questione.
Per schiarirti le idee, ecco un esempio:

:link::after, :link::after{
	content: " ("attr(href)")";
}

Questa regola CSS farà seguire ad ogni collegamento ipertesutale, visitato (:visited) o non (:link), il corrispettivo indirizzo di destinazione indicato tra parentesi.

Ora, siccome il pseudo-elemento è come se fosse un figlio dell'elemento che scrivi nel selettore, puoi sfruttare questa caratteristica e posizionarlo in modo assoluto. Affinché però questo posizionamento assoluto non sia relativo al canvas, ma al contenitore dell'immagine, dovrai usare su quest'ultimo il posizionamento relativo. Il problema è che i tuoi contenitori sono delle celle di una tabella e queste non possono assumere tale posizionamento. Dovresti cambiare quindi struttura della pagina, magari mettendo le immagini come una lista (di fatto è semanticamente una lista di immagini), attribuire ai contenitori che devono mostrare l'etichetta new una apposita classe e buttare giù un po di CSS come questo:

.new{
	position:relative;
}

.new::before/*questa sintassi è CSS3, per assicurarti il funzionamento su browser non recentissimi rimuovi uno dei due punti*/{
	content: "";/*Se questa proprietà non è presente, il pseudo elemento non viene visualizzato affatto*/
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;/*Queste quattro proprietà fanno aggrappare lo pseudo elemento ai quattro lati dell'elemento .new*/
	background-image: url() no-repeat bottom right;
}