[RISOLTO]Background e container

[La Tigre è ancora Viva]

Ciao,
ho messo un immagine di sfondo (background) nel template protostar. Quando però trascino la finestra del browser allargandola il container della pagina scorre mentre il background rimane fisso e quindi mi si vede uno spazio bianco sotto.
C'è un modo o per rendere fisso anche il container? cioè la pagina vera e propria con i contenuti? In questo modo (background fisso, container fisso) non dovrei avere problemi di visualizzazione.

Grazie

[claudiocarrera]

Non ho sottomano un sito con protostar comunque se l' immagine è inserita tramite CSS  e vuoi che si veda sempre anche quando utente scrolla la pagina devi usare la proprietà :

• background-attachment: fixed

[La Tigre è ancora Viva]

quindi basta che metto:

background-attachment: fixed

e automaticamente  la pagina viene bloccata come il background?

[claudiocarrera]

No, è immagine di background che si muove insieme allo scroll della pagina, quindi se scrolli di 100px anche immagine scrollerà di 100px:
http://www.w3schools.com/cssref/pr_background-attachment.asp

[La Tigre è ancora Viva]

Ciao claudio,
dunque io ho messo prima questa proprietà:

background-attachment:fixed;

poi quest'altra:

background-attachment:scroll;

tuttavia il risultato è sempre lo stesso: la pagina sopra scorre e l'immagine di background rimane fissa e quindi mi si vede un riquadro bianco presente sotto nel background.

[claudiocarrera]

Ma tu immagine l'hai data ad un div o al tag body?  se l'hai data ad un div devi controllare che questo prenda tutta l'area del tuo sito.
quarda qua:
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-attachment

[La Tigre è ancora Viva]

Ciao Claudio,
dunque nel mio .css del template PROTOSTAR sostanzialmente l'immagine di background non viene richiamata all'interno del body generale principale e cioè quà dentro:
body[
    background-image:url('../images/nome-immagine.jpg');
    background-repeat:no-repeat;
    background-attachment:fixed;
]

ma bensì nella proprietà seguente:


body.site {
    border-top: 3px solid #0088cc;
    padding: 20px;
    background-image:url('../images/nome-immagine.jpg');
    background-repeat:no-repeat;
    background-attachment:fixed;
   
}

Io come vedi ho messo in entrambe il codice che mi hai indicato. Ho fatto varie prove mettendolo prima solo nel body princopale e poi solo in Body.site e poi in entrambi ma il risultato non cambia. Cioè l'immagine di background rimane fissa mentre tutto il sito sopra scorre.
A questo punto non so a che Santo votarmi per risolvere questa cosa perchè mi sembra che quello che mi hai indicatio tu è giusto però non funziona nel mio template.
Fammi sapere.

Grazie 2000

[berry]

se metti background-attachment:fixed; l'immagine di background rimane fissa mentre tutto il sito sopra scorre, non è questo che vuoi???

se l'immagine deve scrollare metti background-attachment:scroll;

[claudiocarrera]

"La tigre è acora viva" vedo sul forum che hai più di una domanda sulle modifiche del tuo template, perché non lo metti su un spazio di prova "tipo altervista" e ci mandi il link che forse riusciamo a capire dov'è il problema?

[La Tigre è ancora Viva]

Berry, ho provato anche con "scroll" ma il risultato è lo stesso: l'immagine di background rimane fissa e la pagina sopra scorre quando all'argo la pagina del browser.

Per Claudio: purtroppo non posso pubblicarlo il sito in quanto non è mio personale.

Tuttavia immagino che la tecnica per far muovere insieme immagine di background e pagina sito per il template Protostar sia già stata utilizzata da qualcuno che quindi può dirci con esattezza il punto preciso del file .css dove intervenire e con quale modalità esatta.

Grazie

[mau_develop]

..poi te l'ho già ripetuto.. se usi firebug eviti le stesse domande basta che la metti come sfondo al tag che contiene la pagina.. body non centra col contenuto

[La Tigre è ancora Viva]

M_W_C scusami ma non ho capito quello che hai detto.
Qual'è il tag che contiene la pagina?

Thanks

[claudiocarrera]

Qual'è il tag devi scoprirlo tu, se non lo carichi da qualche parte non possiamo aiutarti.

[berry]

visto che parli di allargare non è che ti serve che l'immagine copra sempre l'intera dimensione della finestra?

[La Tigre è ancora Viva]

Ciao berry,
no quello va bene. Nel senso che quando allargo la finestra del browser l'immagine di background copre l'intera larghezza della finestra..quello è OK.

[La Tigre è ancora Viva]

ho installato Firebug ditemi un po esattamente cosa devo andare a guardare?

[La Tigre è ancora Viva]

Confermo, il tag che gestisce l'immagine di background è il seguente:

body.site {
    border-top: 3px solid #0088cc;
    padding: 20px;
    background-image:url('../images/nome-immagine.jpg');
    background-repeat:no-repeat;
    background-attachment:fixed;
   
}

ma come detto sopra non funziona: immagine di background fissa pagina sopra che scorre sopra al background fisso sottostante.

[berry]

prova cambia fixed in scroll, puoi farlo direttamente in Firebug così vedi subito se funziona

[maxzilla]

Berry, ho provato anche con "scroll" ma il risultato è lo stesso: l'immagine di background rimane fissa e la pagina sopra scorre quando all'argo la pagina del browser.

Se il templete e' responsive forse devi definire il body anche per le altre risoluzioni, nel css dove c'e' il @media che definisce ogni limite dello schermo.

[La Tigre è ancora Viva]

ciao Max
si ho messo le regole di cui sopra anche all'interno dei tag: @media ma il risultato non cambia l'immagine di sfondo è fissa la pagina sopra scorre all'allargamento della finestra del browser.

[berry]

prova con background-attachment:fixed !important;   e vediamo cosa succede

[claudiocarrera]

Probilmente  hai una regola del tipo:

@media (min-width: 992px) {
  .ecc...
}
Questo media in pratica dice: "se il monitor ha una risoluzione minima in larghezza di 992px allora applica questi stili.


Nel tuo caso vuoi che lo sfondo si fixed in tutte le risoluzioni, quindi dovrai inserirlo fuori dalla media query non dentro.


Applicala come ultima riga del tuo foglio di stile  fuori da qualsiasi media query  e non dovrebbe darti problemi

[maxzilla]

la tigre...
per essere certi, se il template e' protostar, allora deve funzionare con tutte le risoluzioni del monitor definendo:

background-image:url('../images/nome-immagine.jpg');
    background-repeat:no-repeat;
    background-attachment:fixed;

OPPURE

background-image:url('../images/nome-immagine.jpg');
    background-repeat:no-repeat;
    background-attachment:scroll;

nel primo body {}
che trovi in template.css

[La Tigre è ancora Viva]

Max l'ho definito nel primo body ma non mi funziona. Background rimane fisso e la pagina sopra scorre. Non funziona ne con fixed ne con scroll.
Ora sto facendo ulteriori ricerche in rete ma fino ad ora non ho trovato nessun argomento specifico su questa cosa rapportata al template Protostar.

[maxzilla]

Non funziona come desideri tu o non funziona la differenza la fixed e scroll?

[berry]

con questo

background:url(../images/miafoto.jpg) fixed no-repeat center top;

ho fatto un paio di prove e funziona correttamente sia che lo metta su body o su body.site

con fixed sta fermo con scroll segue la pagina

[La Tigre è ancora Viva]

RISOLTO!

in sotanza nel template Protostar l'unica proprietà all'interno del file  template.css sulla quale bisogna intervenire per far si che l'immagine di background dello sfondo si muova in contemporanea con la pagina che gli sta sopra quando si allarga(o si restringe) la finestra del browser è la seguente:

body.site {
    border-top: 3px solid #0088cc;
    padding: 20px;
    background-attachment: scroll;
    background-color: #FFFFFF;
    background-image:url('../images/nome-immagine.jpg');
    background-position: center top;
    background-repeat: no-repeat;
   

   
}


solo e soltanto su questa regola bisogna intervenire.
Il codice dunque era esatto dall'inizio soltanto che non funzionava in quanto mancava la seguente riga  che ho aggiunto poi e che ha fatto funzionare il tutto:

background-position: center top;

[La Tigre è ancora Viva]

si Berry siamo giunti contemporaneamente alla soluzione era quel "center top" che mancava e non faceva funzionare il tutto.
Grazie Berry, grazie Claudio, grazie M_V_C, grazie maxzilla, grazie a tutti!