Come inserire immagine Background nei post e pagine automaticamente?

Ciao a Tutti, ho trovato un codice molto semplice per inserire un'immagine di sfondo nei post e nelle pagine: <div style="background-image: url('images/stories/key.jpg')"> da chiudere, alla fine del post, con il tag: </div> . Funziona benissimo, ma il problemino è che lo devo aggiungere manualmente ogni volta. Esiste sicuramente un modo per inserire il codice una volta per tutte nell'editor - credo si dica così - in modo da avere lo sfondo di default, sia nelle pagine, sia nei post... ma come si fa? Sono molto ignorante, lo ammetto, e avrei bisogno che un'Anima gentile mi desse indicazioni passo dopo passo, perchè sono andato nella bacheca, ho aperto Aspetto poi Editor e mi sono preso veramente paura... non so dove e come mettere le mani. Il Tema che sto utilizzando è AlterVista Theme 1.1.3, tema Child di Twenty Eleven, versione aggiornata WP 4.0.1. Grazie a chiunque volesse aiutarmi. Sid, admin di unicacoscienza.altervista.org

È difficile capire quale sfondo vuoi modificare. Prova così:

aspetto -> CSS personalizzato.

Aggiungi questo:

Codice:

---

#main {
  background-image: url('images/stories/key.jpg');
}

---

Altrimenti, hai un esempio di pagina in cui hai aggiunto lo sfondo tramite <div> per capire di quale sfondo stai parlando?

Ciao!

Ciao... e grazie per l'interesse. in effetti non sono stato chiaro,adesso capisco. Per intenderci, lo sfondo non è quello che puoi impostare dalla bacheca, bensì uno sfondo all'interno della text area degli articoli/pagine, indipendente dallo sfondo del blog. Potrei darti l'indirizzo del blog per darti la possibilità di intendere quello che dico, visto che non ho la cultura per spiegare bene. www.unicacoscienza.altervista.org Se ti va, potresti aprire un post del 2015, non del 2014 e vedere con i tuoi occhi che ho applicato uno sfondo con cielo stellato. Negli articoli del 2014 non c'è e lo puoi constatare tu. Mi piacerebbe fare una modifica globale, senza dover inserire manualmente 490 volte lo script.. e poi, se in futuro volessi nuovamente cambiare colori e sfondi dovrei ricominciare tutto di nuovo...non è cosa. Bè, spero di essere stato un pò più chiaro e ti ringrazio infinitamente per la tua disponibilità. Intanto, proverò a inserire il codice che mi hai dato e vedrò cosa succede. Grazie ancora, Sid.

Ciao... ho già provato a inserire il codice, ma non è successo nulla; sarò io a non saperci fare, perdonami. Grazie e se vorrai... sono qui. Sid

Ok, se intendi questa immagine, quindi intendevi:

Codice HTML:

---

<div style="background-image: url('http://unicacoscienza.altervista.org/wp-content/uploads/2014/03/PurpleRhythm.8563671.jpg');"> ... </div>

---

Prova sempre dove ti ho detto io prima (css personalizzato) con:

Codice:

---

.pf-content
{
    background-image: url('http://unicacoscienza.altervista.org/wp-content/uploads/2014/03/PurpleRhythm.8563671.jpg');
}

---

Ho preso come riferimento questo post. Inserendo quello che ti ho detto qui, dovrebbe apparire così. Invece ora l'immagine del mondo non ha quel background, perché il div che hai messo tu parte da più sotto. Se vuoi fare in quel modo (e quindi far partire lo sfondo da una zona personalizzata), purtroppo temo che tu debba usare sempre quel div, ma puoi abbinarlo ad una regola comune CSS: puoi fare così:

• Inserire
  Codice HTML:

  ---

  <div class="tuaclasse"> ... </div>

  ---

• Andare nel css personalizzato e inserire:
  Codice:

  ---

  .tuaclasse
{
  background-image: url('http://unicacoscienza.altervista.org/wp-content/uploads/2014/03/PurpleRhythm.8563671.jpg');
}

  ---

• In questo modo, se vuoi cambiare immagine a tutti i div con class="tuaclasse", ti è sufficiente modificare una sola volta l'indirizzo dell'immagine nel css personalizzato.

Fammi sapere se funziona. Comunque se vuoi utilizzare lo sfondo come ti ho descritto nel secondo modo, penso di non essermi spiegato benissimo quindi al più riscrivi qua per eventuali chiarimenti :mrgreen:.

Ciao!

Ciao Alemoppo... funzionaaaaa!!!! Sei Magnifico! Grazie infinitamente! Ho inserito:
.pf-content
{
background-image: url('http://unicacoscienza.altervista.org/wp-content/uploads/2014/03/PurpleRhythm.8563671.jpg');
}

e come ben dici tu il background dell'immagine non parte da una zona personalizzata... mi piacerebbe un pochino di più fare come hai visto nel post, ma, purtroppo non ho capito bene come fare. Dici: inserire codice HTML: <div class="tuaclasse"> ... </div> ma non ho capito dove devo inserirlo (sempre nel css personalizzato? o all'inizio di ogni post?) e nemmeno se "tua classe" è proprio da scrivere così o se tra le virgolette devo mettere qualcosa al posto di "tua classe". Dopodichè il gioco sarebbe semplice xkè nel css ho già scritto l'altro codice che mi hai dato e ho capito come si fa. Non ti conosco e tu non conosci me, ma sei veramente gentile e paziente... Lo sapevo che esistono Anime gentili e, per me, tu sei una di quelle. Con gratitudine... Sid.

Citazione:

---

Originalmente inviato da UnicaCoscienza

Dici: inserire codice HTML: <div class="tuaclasse"> ... </div> ma non ho capito dove devo inserirlo (sempre nel css personalizzato? o all'inizio di ogni post?)

---

All'inizio di ogni post come facevi prima quando inserivi <div ...>. Però prima ogni div impostavi manualmente l'immagine, invece ora puoi impostare la classe css, in modo tale che se vuoi cambiare immagine, devi farlo una sola volta e tutti i div con quella classe cambieranno immagine.

Citazione:

---

Originalmente inviato da UnicaCoscienza

e nemmeno se "tua classe" è proprio da scrivere così o se tra le virgolette devo mettere qualcosa al posto di "tua classe".

---

Invece di tuaclasse puoi scrivere quello che vuoi, l'importante è che non sia già usato nella pagina html, altrimenti sovrascrivi quelle già esistenti. Come capire se una classe esiste già? Beh, bisognerebbe guardare il sorgente della pagina, ma sicuramente se usi dei nomi italiani non ci saranno. Puoi usare tuaclasse, ma ti consiglierei una cosa un po' più specifica e significativa, come sfondostellato1 o simili. Infatti se vuoi puoi usare più classi differenti, e ad ogni classe associare uno sfondo (o altre proprietà css) differente.

Esempio:


Nell'articolo inserisci (proprio come facevi inizialmente):

Codice HTML:

---

<div class="sfondo_stellato_1"> ... </div>

---

E nel css:

Codice:

---

.sfondo_stellato_1
{
    background-image: url('http://unicacoscienza.altervista.org/wp-content/uploads/2014/03/PurpleRhythm.8563671.jpg');
}

---

Se invece come dicevo vuoi usare più classi, ad esempio per mettere uno sfondo differente per ogni tipo di articolo [?] (religioso, politico, etc), sarebbe una cosa del genere:

Nell'articolo di tipo tecnologico

Codice HTML:

---

<div class="sfondotecnologico"> ... </div>

---

Nell'articolo di tipo tecnologico

Codice HTML:

---

<div class="sfondoreligioso"> ... </div>

---

Nell'articolo di tipo tecnologico

Codice HTML:

---

<div class="terzosfondo"> ... </div>

---

e nel css:

Codice:

---

.sfondotecnologico
{
  background-image: url('url_sfondotecnologico.png');
}
.sfondoreligioso
{
  background-image: url('url_sfondoreligioso.png');
}
.terzosfondo
{
  background-image: url('url_altrosfondo.png');
}

---

Spero che questa volta mi sia spiegato un po' meglio. Comunque se c'é qualche problema o qualche curiosità, chiedi pure.

Ciao!

Molto interessante anche per eventuali cambiamenti futuri! Questa volta credo di avere capito e farò esperimenti... del resto è così che si impara, no? :confused: Benissimo, ce la metterò tutta. Abito a Bologna e se dovessi trovarti a passare di qui e ne avessi voglia o tempo mi farebbe piacere conoscerti per ringraziarti di persona... Può darsi che tu sappia come contattarmi o, altrimenti, sul blog c'è la mail... basta avvertirmi e ti risponderò con piacere. Grazie ancora... è stato un grande piacere e molto istruttivo. Sid :thumbsup: