[CSS] Sfondo multiplo

[Cecco BS]

Sto creando un layout per un sito web, sfruttando un foglio di stile esterno.

Nel CSS ho definito uno sfondo fisso:


BODY {
font : normal x-small Verdana, Geneva, sans-serif;
margin : 0;
font-size : 13px;
background-image : url(img.png);
background-attachment: scroll;
background-repeat: no-repeat;
background-position : top left;
}

come faccio se voglio un altro sfondo fisso in un'altra posizione? So che CSS 2 non supporta nativamente questa possibilità (ho provato a definire semplicemente nel codice lì sopra un altro sfondo seperando con una virgola la definizione dello sfondo precedente ma non funziona)... come posso fare? devo sfruttare le div? Qualcuno sa aiutarmi?

[Cecco BS]

up!

[k8__]

Bhè se vuoi usare un altro sfondo in un altra parte della pagina devi usare un div ed applicargli la proprietà background-image a quello specifico div

[Big Bamboo]

Ogni elemento supporta solo uno sfondo per volta. Puoi eventualmente usare un'immagine (con no-repeat) e un colore di sfondo

[Cecco BS]

infatti è quello che pensavo... però non funziona... evidentemente mi sfugge qualcosa, è la prima volta che mi addentro nei div

Nel css ho messo questo:


div.bakg {
background-image : url(img.gif);
background-attachment: fixed;
background-repeat: no-repeat;
background-position : bottom right;
}


lo richiamerei nel documento con il tag <div class="bakg"> eccetera </div> che racchiude tutto il body...?

[Cecco BS]

Ogni elemento supporta solo uno sfondo per volta. Puoi eventualmente usare un'immagine (con no-repeat) e un colore di sfondo

è appunto per questo che pensavo di usare uno sfondo come proprietà del body e uno associato ad un div

[Big Bamboo]

è appunto per questo che pensavo di usare uno sfondo come proprietà del body e uno associato ad un div

no io dicevo del div stesso. prova ad aggiungere
background-color:#f00;

[Cecco BS]

per un attimo sembrava funzionasse, invece...

Guardate l'effetto risultante: http://www.ceccocom.it/test/default2.php
Ecco invece se il testo è lungo e fa scrollare la pagina: http://www.ceccocom.it/test/default.php

praticamente l'immagine in basso a destra si vede solo se rimpicciolisco la pagina sufficientemente da fare lo scroll, altrimenti se il testo è breve e non c'è scroll l'immagine non si vede... ??

PS: niente commenti sull'immagine, è giusto una prova!!! :)

[Cecco BS]

up!

[Cecco BS]

up!

[k8__]

uhm se vuoi usare colore + immagine devo far così
background: #FFFFFF url(img);

[Cecco BS]

colore + immagine che intendi?

cmq usando il codice che suggerisci non si vedono entrambe le immagini...

usando un attributo per il colore dello sfondo del div esso va a coprire lo sfondo della pagina...

:muro:

EDIT: ho provato anche a invertire l'ordine di body e div (o meglio, a mettere div esternamente a body... cosa che forse non è proprio correttissima) ma l'effetto è identico... sembra che alla fine della pagina ci sia un "qualcosa" di bianco che copre lo sfondo del div...

[Big Bamboo]

Per prima cosa ti consiglio di ripassare tutti i tag html e capire quando vanno usati.

Per risolvere il tuo problema utilizzando la proprietà background-attachment:fixed posizioni sempre l'immagine al bordo inferiore destro della finestra. Quando la pagina è troppo piccola, il div non arriva in fondo e non viene visualizzata. Se vuoi ottenere un effetto simile potresti creare un div fittizio e posizionarlo con absolute nell'angolo inferiore destro e assegnargli l'immagine come sfondo.

ciao