[CSS] Problema background-attachment con FIREFOX

[MaRgEnIuS]

Salve a tutti! Vado subito al dunque... Da qualche tempo sto lavorando su un sito internet, la cui parte grafica è stata da me realizzata in CSS. Purtroppo però mi sono bloccato sulla proprietà background-attachment. Utilizzando l'attributo "fixed" per bloccare lo scroll dell'immagine di sfondo noto che la proprietà viene ignorata da FIREFOX mentre funziona correttamente su IE7. Ho cercato un po' in giro ed ho appurato che molti hanno avuto lo stesso problema, però non sono riuscito a trovare nessuna soluzione... C'è per caso qualcuno che mi sa dare qualche informazione in merito ?

[~FullSyst3m~]

Salve a tutti! Vado subito al dunque... Da qualche tempo sto lavorando su un sito internet, la cui parte grafica è stata da me realizzata in CSS. Purtroppo però mi sono bloccato sulla proprietà background-attachment. Utilizzando l'attributo "fixed" per bloccare lo scroll dell'immagine di sfondo noto che la proprietà viene ignorata da FIREFOX mentre funziona correttamente su IE7. Ho cercato un po' in giro ed ho appurato che molti hanno avuto lo stesso problema, però non sono riuscito a trovare nessuna soluzione... C'è per caso qualcuno che mi sa dare qualche informazione in merito ?

Il codice prova a scriverlo cosi

// background-attachment: fixed;

oppure usa l'inclusione condizionata.

http://www.quirksmode.org/css/condcom.html

[CozzaAmara]

Molto strano, dovrebbe funzionare tranquillamente anche su Firefox.

Potresti postare il codice?

[MaRgEnIuS]

Beh... Ho provato, ma non funziona. L'intento sarebbe quello di mantenere fissa l'immagine di sfondo, ma impostando la background-attachment a "fixed" l'immagine continua a scorrere... Cmq il codice CSS è il seguente:


* { margin: 0; padding: 0; }
html {
color: #000000;
background-color: white;
background-image: url(IMG_5665_3.jpg);
background-repeat: repeat;
background-position: top;
background-attachment: fixed;
font: 200% "Ignacio", "Sybil Green", arial, sans-serif;
font-weight: bold;
}
p {
margin: 25px;
font-family: "Ignacio", "Sybil Green", arial, sans-serif;
text-align: center;
}
a {
background-color: inherit;
color: blue;
font-family: "Curlz MT";
font-weight: bold;
font-size: 85%;
padding: 1px 0;
line-height: 52.5px;
text-align: center;
}
#container {
width: 30em;
text-align: center;
}
p.presentazione {
font-family: "Arial Unicode MS", foo, bar, verdana;
font-size: 50%;
font-style: italic;
font-weight: normal;
color: black;
text-align: justify;
margin-left: 0px;
margin-right: 0px;
}
div#navigation {
float: left;
width: 8em;
margin-top: 10px;
}
div#principale {
float: left;
width: 22em;
}

[CozzaAmara]

Così al volo: prova a mettere l'immagine di sfondo nel tag "body" invece che nel tag "html".

[MaRgEnIuS]

Messaggio annullato!

[MaRgEnIuS]

E allora..., aveva in parte ragione CozzaAmara, però effettivamente l'inserimento dell'immagine nel tag body non comportava alcun cambiamento..., però dopo un paio di prove e scervellamenti vari sono arrivato ad una specie di compromesso, ovvero una situazione che sembra risulti adatta ad entrambi i browsers. La cosa mi pare alquanto strana poichè omettendo la voce background-attachment l'immagine risulta già fissa. In sostanza ho lasciato le varie proprietà background inserite nel tag html, ad eccezione della background-position che ho inserito nel tag body, altrimenti l'immagine risulta spostata e nuovamente scrollabile. L'unico problema che ancora è rimasto è che il testo in FIREFOX continua a scorrere quando si riuduce la grandezza della pagina, però ovviamente non viene sovrapposto in quanto la grandezza del container era già stata fissata in precedenza. Cmq qualcuno saprebbe dirmi per caso come risolvere sti problemi in modo più corretto ? Grazie in ogni caso dei consigli ricevuti sino ad ora!
Ecco il pezzo di codice che ho modificato... anche se a me non convince molto...:


html {
background-color: white;
background-image: url(IMG_5665_3.jpg);
background-repeat: repeat;
color: #000000;
font: 200% "Ignacio", "Sybil Green", arial, sans-serif;
font-weight: bold;
}
body {
background-position: top;
}