Inserire un'immagine centrale nell'header

[viaggiatore83]

Ciao vorrei sapere su IoBloggo come si fa a inserire quella che su Splinder veniva chiamata immagine di Header. Ho provato usando nel wizard la casella dell'immagine di background ma è così poco gestibile, esce gigantesca e si ripete più volte. Conosco il comando HTML <IMG SRC che mi permette anche di impostare le dimensioni e di centrarla. ma qui dove posso incollare questo comando? o in alternativa guidatemi passo passo perchè non riesco a farlo.
grazie!

[Alexiel]

Inserisci in "css personale" il seguente codice:

Codice: Seleziona tutto

#intro   
{
   background-image: url('QUI INCOLLI L'URL DELL'IMMAGINE');
}

A questo punto potrai gestirla come vorrai tramite il css

PS: puoi aggiornare il link del tuo blog qui sul forum? Non ci è possibile accedervi perché dice che il blog non esiste!
PPS: sposto nella sezione adatta

[viaggiatore83]

ecco la mia piccola creaturina! ^^
Con la sua mastodontica e pesante immagine di header... devo fare qualcosa!

bassweiss.iobloggo.com

[Alexiel]

Be', cosa fare ora lo sai.
Poi, se per caso tu non te ne intendessi di CSS; ti consiglio le guide di html.it, qui: http://css.html.it/

Se hai ancora problemi, chiedi pure

[viaggiatore83]

ma una cosa non ho capito bene... è nella casella CCS personale del wizard che posso inserire dei comandi per personalizzare il template, giusto? ora, posso inserire anche comandi in codice htlm lì?

[Alexiel]

No, si chiama "CSS personale" perché dentro puoi inserirci solo del codice CSS E sì, è proprio lì che devi inserire il codice che ti ho scritto.

[viaggiatore83]

ok ho inserito un codice un pò più articolato che ho preso da un vecchio post del forum... praticamente l'immagine si è andata a sovrapporre alla barra del testo, allargandola. vorrei un'ultima cosa e poi sono soddisfatto: anzichè allineata a sx, è possibile centrare questa intera "scatola" che contiene il titolo, la descrizione e l'immagine?

[arunka]

prova a sostituire nel css

Codice: Seleziona tutto

  background-position: center;

con

Codice: Seleziona tutto

  background-position: center !important;

Altrimenti prova ad eliminare

Codice: Seleziona tutto

 width: 770px;

che magari gli fa confusione.

[viaggiatore83]

non credo che sia quello il comando... ho avuto modo di sperimentare che quella riga si riferisce in qualche modo al "ritaglio" della foto nel suo spazio. Mi spiego meglio. Prima di rimpicciolire l'immagine, essa era troppo grande rispetto ai pixel che avevo specificato, non veniva ridimensionata ma ritagliata. Ora, mi pare di aver capito che il comando in questione "background-position" si riferisce appunto al modo in cui l'immagine viene ritagliata per conformarsi alle dimensioni imposte, quindi interessa per così dire l'interno dell'immagine, e non agisce sul "contenitore", chiamiamolo così, che ospita immagine titolo del blog e descrizione. Infatti anche se provo a inserire "right", di fatto la casella resta allineata a sinisitra. Ci dev'essere un altro comando, che non conosco

[Alexiel]

Ma queste proprietà le hai date ad #intro? Mi sembra tu le abbia date a #pageHeader
Inoltre hai scritto: "questa informazione credo sia superflua perchè inserita direttamente nel wizard". Elimina quel link dal wizard e tienilo solo nel css. Facci sapere.

[arunka]

background-posizion è la posizione del background che, come hai impostato due righe più su è definito come l'url della tua immagine.
Quindi, a logica, background-posizion è la posizione della tua immagine. se non funziona può essere che va in conflitto con il codice del wizad, o come dice Alexiel, hai definito male qualcosa.
Quando ho meno fretta ci guarderò.

[viaggiatore83]

diciamo che "ignorantemente" ho capito il problema. il comando deve essere indirizzato non all'immagine, ma alla casella che contiene il titolo del blog e il sottotitolo. Se riesco a centrare quella, automaticamente verrà centrata anche l'immagine. Tra l'altro viceversa se anche riuscissi a centrare l'immagine ma il titolo del blog restasse allineato a sinistra, sarebbe proprio brutto!

[arunka]

Secondo me devi centrare l'immagine E il titolo. Adesso ti rubo l'immagine e faccio delle prove da me.

in più se non toglie quella cosa "<--questo" il css non funzionerà! o lo commenti per bene, o lo toglie! non si può mettere del testo a vanvera!

[arunka]

Allora (ne avevo parlato qua,mi ricordavo infatti viewtopic.php?f=29&t=6305&p=76722&hilit=header+wizard#p76722)
cancella quella cosa che hai scritto e scrivi

Codice: Seleziona tutto

#intro {
background-repeat: no-repeat !important;
background-position: center !important;
}

questo codice serve per mettere centrata l'immagine.

le calssi che invece modificano il titolo e il sottotilo sono

Codice: Seleziona tutto

#pageHeader h1  { }
#pageHeader h1 A {}
#pageHeader h2  {}
#pageHeader h2 A {}

se vuoi il testo centrato copia le righe sopra e dentro alle { } scrivi

Codice: Seleziona tutto

font-align:center !important;

prova e fammi sapere.

[viaggiatore83]

Guarda non ha funzionato...
L'immagine con la scritta continua ad essere allineata sulla sinistra.
Per ora quello che ho inserito nella casella CCS personale è:

#pageHeader {
width: 770px;
height: 500px;
background-image: url(http://img69.imageshack.us/img69/6774/p ... iccolo.jpg);
background-repeat: no-repeat !important;
background-position: center !important;
}
#pageHeader h1 {font-align:center !important;}
#pageHeader h1 A {font-align:center !important;}
#pageHeader h2 {font-align:center !important;}
#pageHeader h2 A {font-align:center !important;}



Non saprei...
(l'indirizzo del blog è http://bassweiss.iobloggo.com/ )