inserire un immagine nei css

[luglio1975]

Voglio inserire un' immagine nel box1 (nei css), in modo da poterla in futuro cambiare in tutte le pagine riportate (esempio 10pagine).

Come posso fare?



- html -

<div class=box1>


Il tesoro delle conoscenze e delle esperienze tecniche unite ad un gusto ed uno stile raffinatosi nei secoli fa delle ceramiche umbre veri e propri capolavori dell'artigianato artistico italiano...</p>
</div>

- css -

.box1 {
BORDER-TOP: 1px dashed #809fff;
BORDER-BOTTOM: 1px dashed #809fff;
BORDER-RIGHT: 1px dashed #809fff;
BORDER-LEFT: 1px dashed #809fff;
WIDTH: 182px;
PADDING-TOP: 4px;
PADDING-BOTTOM: 4px;
PADDING-RIGHT: 2px;
PADDING-LEFT: 2px;
BACKGROUND: #ffffbf;
MARGIN: 1px 1px 2px;
TEXT-ALIGN: right
}
.box1 P {
CLEAR: both;
MARGIN: 4px
}

[floyd46]

se mi permetti, attenta alla sintassi:
<div class="box1"> e non <div class=box1>
mancano le virgolette.

per poter inserire l'immagine devi scrivere così:

#box1{
margin:1px 1px 2px;
padding:4px 2px;
border:1px dashed #809fff;
width:182px;
background:url(nomeimmagine.jpg)no-repeat left top #ffffbf;
height: ??? /* altezza box = a quella della foto */
text-align:right;
}
il codice che hai scritto, sarebbe meglio portarlo tutto in minuscolo e raggruparlo.
prova a scrivere così e posta se hai ancora problemi.
ciao

[pierofix]

In linea di principio, per inserire un'immagine di sfondo ad un elemento tramite css si fa così (nell'esempio è un tag div con id="news"):

#news {
   background: url(nomeimmagine.gif) no-repeat 0 0;
}

1. url(...) serve ad indicare il percorso dell'immagine (relativo al file css stesso).

2. no-repeat indica che l'immagine non viene ripetuta se l'elemento è più ampio di essa. In questa posizione tali valori possono assumere:
- no-repeat;
- repeat-x;
- repeat-y;

3. 0 0 indica le coordinate secondo cui posizionare l'immagine nell'elemento (il primo zero indica la distanza dal bordo sinistro dell'elemento, il secondo quella dal bordo superiore). Puoi usare sia valori in px che in percentuale (50% 50% posiziona l'immagine di sfondo al centro dell'elemento).

4. Nel caso tu applichi l'immagine come sfondo dell'intera pagina (body), puoi decidere di mantenerla fissa e non farla scollare assieme ad essa. Per fare ciò occorre scrivere - dopo no-repeat - fixed.

[luglio1975]

GRAZIE A TUTTI E DUE

[luglio1975]

- css -
.box1 {
BORDER-TOP: 1px dashed #809fff;
BORDER-BOTTOM: 1px dashed #809fff;
BORDER-RIGHT: 1px dashed #809fff;
BORDER-LEFT: 1px dashed #809fff;
WIDTH: 400px;
height: 200px;
PADDING-TOP: 1px;
PADDING-BOTTOM: 1px;
PADDING-RIGHT: 1px;
PADDING-LEFT: 1px;
BACKGROUND: #ffffbf;
MARGIN: 1px 1px 1px 1px;
TEXT-ALIGN: center
}

#img {
BACKGROUND: url(../prova/banner.gif) no-repeat 0 0;
TOP: 150px;
LEFT: 200px;
}


- html -

<div class="box1">
<h3>titolo</h3>


ciao ciaociao ciaociaociao ciao</p>


<div class="img">
</div>

[pierofix]

1. Le classi si richiamano con il punto, non il cancelletto (quello è per gli id).

Quindi il codice deve essere

.img {
   /* proprietà */
}

2. Dovresti dare delle dimensioni al div che ospita come sfondo l'immagine.
Ad esempio

.img {
   width:200px;
   height:200px;
   /* proprietà di background */
}

P.S. Non è un errore ma abituati a scrivere gli attributi in minuscolo.

[luglio1975]

in poche parole per inserire un immagine in una classe, devo usare sempre un' altra classe o un identificatore?

[pierofix]

Semplicemente, per selezionare la classe "pippo" usi il punto ( .pippo ), mentre per selezionare l'elemento con id="paperino" usi il cancelletto ( #paperino ). Tutto qui.

Se volessi inserire uno sfondo a questo elemento (che voglio sia grande 200px × 200px)

<div class="img"></div>

farò semplicemente così:

.img {
   width:200px; height:200px;
   background:url(imma.png) no-repeat 0 0;
}

Chiaro?

[luglio1975]

tutto chiaro.

e per posizionare l'immagine nel
box1 (esempio largo 400, alto 300)

immagine (l=81 h=33) nel punto top=200 e left= 140

che devo scrivere?