posizionare immagine di sfondo

[james]

Ciao,
sto impazzendo per posizionare una immagine. Tutta la pagina è contenuta in un div container, io vorrei far spuntare un grosso smile sul bordo superiore destro, facendo in modo che un quarto di esso rimanga nascosto sotto il container, se lo smile fosse un orologio è come se le ore che vanno dalle 6 alle 9, quell'angolo del cerchio debba essere nascosto.

Il width del container è definito in px ed è centrato con un margin 0 auto, c'è un modo per far apparire una immagine in quella posizione??

Grazie!

[Mich_]

Si puo` risolvere anche in altri modi, ma credo che il piu` semplice sia:

Metti il tuo smile sulla destra di un'immagine larga esattamente quanto il #container + la larghezza dello smile e alta quanto lo smile (e il resto bianco o trasparente).
Metti tale immagine come sfondo del body (o comunque del blocco che contiene il #container) senza ripetizione centrata in orizzontale e al top in verticale.
Dai al #container un margine superiore di meta` dell'altezza dell'immagine suddetta (il margine sara` quindi:
margin Xpx auto 0;
)

[james]

Originariamente inviato da Mich_
Si puo` risolvere anche in altri modi, ma credo che il piu` semplice sia:

Metti il tuo smile sulla destra di un'immagine larga esattamente quanto il #container + la larghezza dello smile e alta quanto lo smile (e il resto bianco o trasparente).
Metti tale immagine come sfondo del body (o comunque del blocco che contiene il #container) senza ripetizione centrata in orizzontale e al top in verticale.
Dai al #container un margine superiore di meta` dell'altezza dell'immagine suddetta (il margine sara` quindi:
margin Xpx auto 0;
)

Io avevo tentato di metterla in un div position fixed, ed ho provato a giocare con z-index senza successo, perchè in questo modo lo smile sarebbe rimasto fermo allo scroll della pagina, ma i problemi sono due:
1. come posizionarlo in quel punto con questa tecnica
2. come fare in modo che resti sotto a tutto il resto, ho provato z-index:0 e z-index con valori negativi, ma in ogni caso mi resta sopra alle altre immagini definite come background-image via css.

[Mich_]

In alcuni browser puoi usare anche z-index nulli o negativi, ma in altri no. Quindi conviene usare z-index sempre positivi.

L'uso dei posizionamenti e` una delle cose piu` complesse nell'uso dei CSS, con probelmi di compatibilita` con alcuni browser: io lo sconsiglio se non proprio necessario. Comunque se vuoi precorrere quella strada, questi due link sono basilari: pero` se non capisci qualcosa degli articoli, devi studiare e risolvere i dubbi, in alternativa l'unica soluzione e` non usare i posizionamenti.
I posizionamenti assoluti
Capire i posizionamenti relativi


Io non inserirei un blocco apposito: complica la pagina inutilmente e puo` dare problemi in alcuni browser: la soluzione di usare l'immagine dello smile per uno sfondo e` senz'altro preferibile sia dal punto di vista semantico che pratico.

Tieni presente che uno sfondo puo` anche essere posizionato in modo fisso:
background-attachment: fixed;
(non funziona in IE6, ma e` un problema minore e sistemabile tramite hack JS)