[Risolto] problema header e sfondo

[gianni30]

ciao ragazzi ho ancora bisogno di voi...

sempre nel sito tabu.joomlahost.it non riesco a ridimensionare headere e sfondo...

mi spiego meglio vorrei che header e sfondo ricopressero tutta la pagina che hanno a disposizione senza ripetersi ovviamente, l'ideale sarebbe che si adattassero allo schermo che hanno...

per l'header ho provato a vedere se trovavo dei margini nel css ma non trovo la sezione giusta mi sa...

[adottauncane]

Ciao gianni30,
qui, correggi così:

Codice: [Seleziona]

#art-main {    background: url("../images/page.jpeg") no-repeat scroll 0 0 / cover  #FFFFFF;    cursor: default;    font-family: Arial,'Arial Unicode MS',Helvetica,Sans-Serif;    font-size: 17px;    font-style: normal;    font-weight: normal;    left: 0;    margin: 0 auto;    min-height: 100%;    overflow: hidden;    position: relative;    top: 0;    width: 100%;}    background: url("../images/page.jpeg") no-repeat scroll 0 0 / cover  #FFFFFF;

template.css riga 1

[Cereal___killer]

Per lo sfondo ti basta modificare la prima riga di "template.css", nella sezione #art-main, aggiungendo:


     background-size: cover;


in modo che il tutto risulti così:



#art-main {
  background: #FFFFFF url('../images/page.jpeg') no-repeat scroll;
  margin: 0 auto;
  font-size: 17px;
  font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
  font-weight: normal;
  font-style: normal;
  position: relative;
  width: 100%;
  min-height: 100%;
  left: 0;
  top: 0;
  cursor: default;
  overflow: hidden;
  background-size: cover;
}


Per quanto riguarda l'header, l'immagine copre già tutta la superficie: template.css alla riga 393, nella sezione .art-header imposta l'altezza dell'header a 110px;
l'immagine pertanto si adatta anch'essa a 110px; essendo l'immagine questa:
http://tabu.joomlahost.it/templates/tabu_quasi_finale/images/header.jpg
si può vedere che ha ai lati delle parti in rosa che sono proprie dell'immagine stessa; se intendi dire che non vuoi vedere quelle parti rosa, andrebbero in primis ritagliate via, e poi bisognerebbe vedere se basta impostare un "background-size: cover" anche qui

[gianni30]

ho fatto come hai detto tu Cereal___killer
e tutto va bene per lo sfondo. ma quando apro il sito con IE l'immagine di sfondo è ancora con bordi bianchi e non si estende a tutta la pagina.


per l'header non mi ero accorto dei margini dell'immagine ora provo a ritagliarli e vi faccio sapere.

[giovi]

che versione di ie? le vecchie versioni (almeno fino alla 8 ) non supportano pienamente il css3 quindi dovrai risolvere utilizzando un'immagine più grande del tuo schermo che ri simpicciolirà solo per i browser più moderni. magari ad ie8 gli dai un position-fixed tramite i conditional comments

[gianni30]

grazie mille giovi avevo appena cercato e trovato che ci sono problemi con IE io difatti ho l'8.


mi potresti far vedere come evitare questo problema con il comando che mi hai appena detto per favore.


ti ringrazio in anticipo...

[giovi]

ma certo! Intanto utilizza un'immagine come ti dicevo molto più grande del tuo browser (se vuoi star sicuro usa una larghezza minima di 1600px ottimizzata per il web (max 300Kb di peso!) e poi nella pagina index.php del tuo template, appena prima del tag </head> (lo trovi nella prima metà della pagina) scrivi

Codice: [Seleziona]

<!--[if lt IE 9]>
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
<![endif]-->E' da testare in quanto non l'ho provato personalmente, ho risolto con altri metodi (es. immagine con dimensioni percentuali posizionata in modo assoluto nel tag body o con javascript)!

[gianni30]

molto buono.., giustissimo i problemi che ho sono che l'header non è grande come tutta la pagina anche se ho eliminato i bordi rosa e ho una scritta in alto a destra

background-repeat:no-repeat; background-attachment:fixed; background-position:center;

[giovi]

scusa ho dimenticato il tag style!!!
Correggi con:

Codice: [Seleziona]

<!--[if lt IE 9]><style>
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
</style><![endif]-->
In realtà l'header è già grande quanto tutta la pagina, è il suo sfondo che ha lo stesso problema dello sfondo della pagina

[gianni30]

perfetto...

quindi per allargare l'header cosa devo fare?

[giovi]

aspetta c'è ancora un errore nel codice che ti ho postato: devi inserire anche il selettore così

Codice: [Seleziona]

<!--[if lt IE 9]><style>
#art-main{
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</style><![endif]-->Ma tu stai verificando se quello che modifichi sta funzionando?

[gianni30]

si e il codice che mi hai dato prima funziona benissimo...

mi rimane il porblema dell'header ora faccio la modifica che mi hai detto

[giovi]

il codice che ti ho dato prima non poteva funzionare perchè era errato.... tant'è che inizialmente lo visualizzavi come semplice testo e poi visualizzavi semplicemente gli effetti dell'immagine più grande..

per l'header invece devi utilizzare un'immagine della stessa larghezza dello sfondo altrimenti con ibrowser vecchi avrai sempre lo stesso problema. Se utilizzi windows xp con sp2 installa chrome, almeno hai la possibilità di vedere come visualizza il sito un computer più aggiornato.

[gianni30]

ok grazie... si si per la visualizzazione aggiornata e non uso il portatile mentre faccio le modifiche sul fisso... ora faccio l'header... srano però il codice vecchio andava anche sul tablet di mio zio...

comunque grazie mille per la disponibilità...

grazie a tutti