Inserire immagine dietro a scritte

carlitos1982

Inserire immagine dietro a scritte

Salve,
vorrei poter inserire dietro del font e un campo input un immagine...però l'immagine non dovrebbe coprire il font e_il campo input...cioè dovrebbe essere portata dietro alle scritte e al campo input..tipo come se fosse uno sfondo...

Sulla mia pagina ho il seguente codice

[php]
<div id="login">

            Login</div>
    </p>
        <div id="nickname"><form action="login2.php" method="post">
            Nickname</div> 
            <div id="input1"><input type="text" name="nickname" size="20" style="border-style: dashed; border-width: 1px"></div>

[/php]Sul foglio di stile ho fatto cosi'


#login {
position:absolute;
font: 45px Whimsy TT;
color: #FFFFFF;
    top: 100px;
    left: 50px;

}
#nickname{
position:absolute;
font: 20px Whimsy TT;
color:;
    top: 175px;
    left: 50px;
    }
    #input1{
position:absolute;
    top: 197px;
    left: 50px;
    }

```Quindi....ripeto l'immagine che vorrei inserire deve andar dietro e non davanti...cioè non deve coprirmi il campo input e la scritta nickname....
Qualcuno sa come fare?

emnlmn

Potresti inserire tutto in un div contenitore al quale assegnerai un immagine di sfondo tramite la proprietà background nel css.

carlitos1982

[..]
In quel foglio di stile ho già un immagine di sfondo...assegnata con la proprietà background.....posso tranquillamente inserirne un altra?:():

emnlmn

La proprietà background la puoi inserire in ciascuna regola del tuo css (ovviamente potrebbero esserci oggetti ai quali l'eventuale immagine assegnata non sarà visualizzata). Quindi direi di si

carlitos1982

[..]
MMM..
Io ho gia provato ma non mi visualizza nulla:?
Posto il codice css:

body {
background: #FF9999;
background-image: url("logo.gif");
background-repeat: no-repeat;
Background-attachment: fixed;
background-position: 100% 12%;
}

Qui' c'è la prima immagine di sfondo....
Ora per inserire un altra immagine come faccio?
In questo codice che ho appena postato non posso inserire un altra background-image altrimenti non mi visualizza quella di prima:(
Ho notato che le immagini vengono visualizzate solo se inserite fra questo tag css body{ };
Non mi è chiaro ancora come inserire le immagini tramite i css!!_Ho capito solo come inserire l'immagine di sfondo:(
Per inserire un'immagine devo usare sempre e solo il background-image?_E per far si' che sia visualizzata devo per forza includerla fra questo tag body{ }; ?

Io avevo provato facendo cosi':

#contenitore {

background-image: url("login.gif");
background-repeat: no-repeat;
Background-attachment: fixed;
background-position: 40% 12%;
}

Però non mi visualizza nulla:x

carlitos1982

Forse ho risolto...ma chiedo comunque a voi se ho fatto bene,
Ho fatto cosi'...
Nella pagina html ho inserito questo codice

[php]
<DIV id="contenitore"><IMG SRC="login.gif" ALT="login" ></DIV>
]

[/php]

E nel css ho fatto cosi'
#contenitore {

position:relative;
top: 100px;
left: 25px;
}

mi funziona...ho fatto giusto?:)

emnlmn

Il primo metodo che avevi usato è il più adatto dei due per inserire un immagine di sfondo, in quando meglio separa contenuti da presentazione.
Sul fatto che non ti visualizzasse lo sfondo lo trovo strano, probabilmente hai commesso qualce errore involontario nel posizionarlo (sicuro che i valori della proprietà background-position siano corretti?), oppure il blocco è vuoto (non contiene testo o altri elementi che abbiano dimensioni).

ti faccio un esempio veloce:


HTML:

[...]
<body>
  <div id="contenitore"></div>
</body>

CSS:

body {
  background:url(sfondo_body.png) left top no-repeat;
}

#contenitore {
  width:300px;
  height:200px;
  background:url(sfondo_blocco_300x200.png) left top no-repeat;
}

spero che ora ti sia più chiaro.

carlitos1982

Con questo metodo internet explorem mi visualizza l immagine mentre mozilla firefox non la visualizza:x

taiku

Ciao, anche io avevo un problema del geenre con un sito che sto facendo.
ho risolto il problema creando una serie di classi, ciascuna con la sua bella immagine, che poi inserivo nel div che mi interessava.
Una cosa del tipo:
.sfondoa{
background-image:url(../Immagini/monaco.gif);
background-position:left top;
background-repeat:no-repeat;
}
Questo mi consentiva di anche di avere sfondi diversi per pagine diverse, pur nello stesso div, e anche più sfondi sovrapposti.

karedas

Ciao Carlitos,
Non so se ho capito perfettamente la situazione ma potresti usare i livelli del web attraverso la proprietà z-index.

Praticamente funzionano come con photoshop, devi solo distribuire come una pila di libri cosa vuoi sotto, sopra ed in mezzo.

Se non hai risolto ancora con i precedenti tentativi passiamo alla spiegazione pratica