Originariamente inviata da
Mich_
Anzitutto devi capire se l'immagine e` un elemento di contenuto, o se e` un abbellimento.
Nel primo caso devi inserirla con il tag <img>, nel secondo va inserita come sfondo.
Nel secondo caso la domanda non si pone: e` gia` quello che fa sempre uno sfondo; probabilmente devi definire le dimensioni, in modo che l'immagine non venga tagliata o non restino bordi.
Se devi sovrapporre due oggetti (primo caso), devi per forza usare i posizionamenti, e probabilmente anche l'attributo z-index.
Il posizionamento assoluto puo` essere una soluzione: sembra la piu` semplice ma molto spesso ha controindicazioni ceh saltano fuori quando la pagina viene visualizzata in un brwoser diverso o con risoluzioni di schermo diverse: non sarebbe da usare fintanto che non i ha una buona esperienza con i CSS ed i layout .
La struttura che ti consiglio, e` quindi una cosa del tipo (ma occorre vedere come e` fatta la pagina per poter scendere nei particolari):
codice:
HTML:
<body>
<div id="box_imm">
<img .... />
</div>
<div id="testi">
... il resto degli elementi ...
</div>
</body>
CSS:
html {
width: 100%;
}
body {
width: ...; /* espresso in px o % */
/* position: relative; - non necessario se si tratta del body; necessario se e` un div */
}
#box_imm {
width: AAApx; /* prob uguale a width immagine + border, padding, margin */
height: BBBpx;
position: relative;
z-index: 10;
}
#testi {
position: relative;
top: -BBBpx; /* sposto in su dello spazio del #box_imm */
z-index: 20;
}
Rispondi quotando
