Background...a partire da un certo punto.

[ivanisevic82]

Ciao ragazzi, ho una domanda (spero semplice!) per voi.

Nel mio sito c'è un immagine di backgrond (una linea di 1024 x 1px) che si ripete orizzontalmente.
Questa immagine fa da background al "container", che comprende tutto il sito, dall'header al footer.

Ora, io vorrei invece che l'immagine non facessa da sfondo a TUTTO, ma solo da un certo punto in giù (header e menù orizzontale devono essere senza questo sfondo).

Come posso fare?

Devo necessariamente tirare fuori dal container header e menu (per evitare che il background stia anche sotto di loro) oppure esiste qualche comando per dire al background "anche se ti ho messo nel container, parti dopo 100px a partire dall'alto.

Qualcosa come un margin o padding-top, da applicare SOLO al background.

Come si fa?

Grazie!

[Mich_]

background-position: 0 100px;
background-repeat: repeat-y;

[ivanisevic82]

2 cose:

1) In container, alla voce "background-position" avevo già messo "center".
Se voglio inserire "background-position: 0 100px;" come devo fare?
Posso duplicare la voce "background-position"?

In ogni caso, ho fatto una prova preliminare, giusto per vedere se funzionava, sostituendo a "background-position: center;", la riga "background-position: 0 100px;".
Però non funziona, lo sfondo continua a partire dalla cima.

2) Dopo aver postato la domanda ho trovato una soluzione alternativa...ma non so se è migliore o peggiore (estiticamente è uguale).
In pratica, al posto di tenere tutto in un uni container, faccio un "MiniContainer1" (all'interno del quale mettere header e menu) e un "MiniContainer2" (dove mettere il resto, fino al footer).
Entrambi chiusi all'interno di un "Container" normale.

In questo modo posso dare due sfondi diversi ai "MiniContainer" (cioè alle diverse porzioni di spazio) e al contempo racchiudere tutto in un container totale.

Grazie delle risposte!

[Mich_]

Originariamente inviato da ivanisevic82
1) In container, alla voce "background-position" avevo già messo "center".
Se voglio inserire "background-position: 0 100px;" come devo fare?
Posso duplicare la voce "background-position"?

No, se lo duplichi vale solo l'ultima definizione.
background-position ha due parametri: se sono ambedue mnemonici l'ordine e` Y X; se almeno uno e` numerico, l'ordine e` X Y. Vedi ad esempio: http://www.w3schools.com/css/css_reference.asp

In ogni caso, ho fatto una prova preliminare, giusto per vedere se funzionava, sostituendo a "background-position: center;", la riga "background-position: 0 100px;".
Però non funziona, lo sfondo continua a partire dalla cima.

Controlla che non ci siano errori di sintassi da qualche parte: usa il validatore (vedi "link utili").

2) Dopo aver postato la domanda ho trovato una soluzione alternativa...ma non so se è migliore o peggiore (estiticamente è uguale).
In pratica, al posto di tenere tutto in un uni container, faccio un "MiniContainer1" (all'interno del quale mettere header e menu) e un "MiniContainer2" (dove mettere il resto, fino al footer).
Entrambi chiusi all'interno di un "Container" normale.

In questo modo posso dare due sfondi diversi ai "MiniContainer" (cioè alle diverse porzioni di spazio) e al contempo racchiudere tutto in un container totale.

Grazie delle risposte!

Mi pareva dal primo post che volessi evitare quella soluzione. Non e` sbagliata, ma necessita di marcatura supplementare: se si puo` evitare e` meglio.

[ivanisevic82]

Originariamente inviato da Mich_
No, se lo duplichi vale solo l'ultima definizione.
background-position ha due parametri: se sono ambedue mnemonici l'ordine e` Y X; se almeno uno e` numerico, l'ordine e` X Y. Vedi ad esempio: http://www.w3schools.com/css/css_reference.asp

Quindi, considerando che uno è numerico e l'altro no, dovrei metere prima X e poi Y?
Non ho capito bene come lo dovrei scrivere...verrebbe fuori così?

background-position: x 0 100px y center;

Originariamente inviato da Mich_
Controlla che non ci siano errori di sintassi da qualche parte: usa il validatore (vedi "link utili").

Può essere che non mi funziona a causa del "min-height: 100%" che ho dovuto utilizzare per posizionare correttamente il footer (come da guida css a 3 colonne)?

Originariamente inviato da Mich_
Mi pareva dal primo post che volessi evitare quella soluzione. Non e` sbagliata, ma necessita di marcatura supplementare: se si puo` evitare e` meglio.

Giusto per una questione di mia "cultura": cos'è un marcatore supplementare?

Grazie mille per il supporto!

[Mich_]

Originariamente inviato da ivanisevic82
Quindi, considerando che uno è numerico e l'altro no, dovrei metere prima X e poi Y?
Non ho capito bene come lo dovrei scrivere...verrebbe fuori così?

background-position: x 0 100px y center;

Non so dove hai pescato quella sintassi. Leggiti qualche guida prima di scrivere.
Devi dare DUE parametri, non cinque.

Può essere che non mi funziona a causa del "min-height: 100%" che ho dovuto utilizzare per posizionare correttamente il footer (come da guida css a 3 colonne)?

No, a meno che non manchi qualche puntoevirgola (quello impedisce l'interpretazione del resto del codice).

Giusto per una questione di mia "cultura": cos'è un marcatore supplementare?

Non so cosa intendi tu.

Io ho parlato di marcatura, che per una pagina Web e` l'insieme dei tag HTML (HyperTerminal Markup Language)