Autore Topic: informazione per adattare immagine di background (Letto 16575 volte)

astianatte · « **il:** 26 Gen 2013, 12:06:53 »

Salve ragazzi
sto iniziando questa avventura con joomla perchè mi è stato chiesto di fare un sito per la mia ASD. Sto cominciando a smanettare su un sito di prova per poi una volta apprese le basi passare direttamente al sito "ufficiale". Mentre per alcune cose ho trovato delle guide e in questo forum argomenti che mi hanno aiutato a superare qualche impiccio è arrivato il momento del primo ostacolo stupido ma a cui non trovo una soluzione soddisfacente.

Ho necessità di adattare una immagine di sfondo al template beez2 che si adatti a tutte le risoluzioni e dimensioni finestra.

C'ero riuscito grazie a questa guida http://forum.joomla.it/index.php/topic,86830.msg383457.html#msg383457

però poi mi sono accorto che alcuni plugin tipo phocamaps non mi funzionavano più e rifunzionavano dopo aver cancellato le modifiche apportate da quella guida.

Esiste qualche altro metodo per fare la stessa cosa senza cambiare template?

sul web non ho trovato nulla che faccia al caso mio o quantomeno se c'è non ho ben capito come fare. vi prego di dare le risposte come se davanti aveste un bimbo di 2 anni

giovi · « **Risposta #1 il:** 26 Gen 2013, 12:07:56 »

ciao, in poche parole ti serve un background che abbia esattamente le dimensioni della finestra?

astianatte · « **Risposta #2 il:** 26 Gen 2013, 12:13:22 »

esattamente

nn mi interessa che al variare della risoluzione l'immagine si deformi tanto è immagine di un prato
quello script era perfetto ma mi va in conflitto con altri plugin che smettono di funzionare e non so perchè

giovi · « **Risposta #3 il:** 26 Gen 2013, 12:21:55 »

allora niente script, solo css!

sei in grado di modificare il template autonomamente?
In caso affermativo incolla questo appena subito dopo il tag <body>:

Codice: [Seleziona]

<img class=bg src="link-alla-tua-immagine-di-sfondo.jpg" alt="">
poi nel css del tuo template aggiungi:

Codice: [Seleziona]

img.bg{
				z-index:-1;
				min-height:100%;
				min-width:1008px;
				width:100%;
				height:auto;
				position:fixed;
				top:0;
				left:0;
			}

BelinBelan · « **Risposta #4 il:** 26 Gen 2013, 12:22:14 »

Buongiorno,
mi era servito anche a me, tempo fa, e avevo risolto così:

Codice: [Seleziona]

body { background: url('orange_fruit-background-wallpaper-Free.jpg') no-repeat center center fixed; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover;


body {03    background: url('orange_fruit-background-wallpaper-Free.jpg') no-repeat center center fixed;04    -moz-background-size: cover;05    -webkit-background-size: cover;06    -o-background-size: cover;07    background-size: cover; - See more at: http://www.allaroundtheweb.it/segui-blog-allaroundtheweb/item/71-come-creare-barra-flottante-con-sfondo-fisso-usando-jquery-floating-bar.html#sthash.X5JkPFLg.dpuf
body {03    background: url('orange_fruit-background-wallpaper-Free.jpg') no-repeat center center fixed;04    -moz-background-size: cover;05    -webkit-background-size: cover;06    -o-background-size: cover;07    background-size: cover; - See more at: http://www.allaroundtheweb.it/segui-blog-allaroundtheweb/item/71-come-creare-barra-flottante-con-sfondo-fisso-usando-jquery-floating-bar.html#sthash.X5JkPFLg.dpufbody {03    background: url('orange_fruit-background-wallpaper-Free.jpg') no-repeat center center fixed;04    -moz-background-size: cover;05    -webkit-background-size: cover;06    -o-background-size: cover;07    background-size: cover; - See more at: http://www.allaroundtheweb.it/segui-blog-allaroundtheweb/item/71-come-creare-barra-flottante-con-sfondo-fisso-usando-jquery-floating-bar.html#sthash.X5JkPFLg.dpuf

giovi · « **Risposta #5 il:** 26 Gen 2013, 23:58:21 »

però cosi stai usando delle direttive appartenenti al css3 e proprietarie (non riconosciute dal w3c). Le direttive per il webkit sono ottime se vuoi avere un effetto sicuro ma non puoi usarle su siti che necessitano accessibilità e retrocompatibilità con i vecchi browser!

astianatte · « **Risposta #6 il:** 28 Gen 2013, 09:11:27 »

Citazione da: giovi - 26 Gen 2013, 12:21:55

allora niente script, solo css!
sei in grado di modificare il template autonomamente?
In caso affermativo incolla questo appena subito dopo il tag <body>:
Codice: [Seleziona]
<img class=bg src="link-alla-tua-immagine-di-sfondo.jpg" alt="">
poi nel css del tuo template aggiungi:
Codice: [Seleziona]
img.bg{ z-index:-1; min-height:100%; min-width:1008px; width:100%; height:auto; position:fixed; top:0; left:0; }

intanto grazie a entrambi per le risposte

@giovi
la prima porzione di codice la inserisco nel file index.php?
la seconda parte invece in quale css? in personal.css o template.css?

giovi · « **Risposta #7 il:** 28 Gen 2013, 10:05:30 »

esattamente, il tag <img ..... /> va inserito subito dopo il tag <body> del file index.php del tuo template.
La dichiarazione di stile invece devi inserirla in uno dei due file.css, senza vedere il tuo sito non posso dirti quale sia quello più adatto ma solitamente è indifferente. Oggi mi ispira più "template.css"..

astianatte · « **Risposta #8 il:** 28 Gen 2013, 10:11:06 »

ok seguito il tuo consiglio e ho inserito come mi hai detto tu
solo che adesso l'immagine di sfondo è in testa al sito...

ti linko il sito di prova
http://www.asdmontecatalfano.joomlafree.it/

edit ho provato a spostare anche la seconda parte di codice nel foglio di stile personal.css

edit2 nel personal.css sembra che adesso funzioni

giovi · « **Risposta #9 il:** 28 Gen 2013, 10:22:31 »

Ottimo! un bell'effetto, no?

astianatte · « **Risposta #10 il:** 28 Gen 2013, 10:28:28 »

orca miseria!!! mi sbattevo da giorni (anche se nel fine settimana non ho potuto provare i tuoi consigli) prima che tu mi dessi la soluzione!!! grazie davvero!!!

una curiosità

min-width:1008px;

cosa significa?

giovi · « **Risposta #11 il:** 28 Gen 2013, 11:04:49 »

dice all'immagine che non deve avere una lunghezza minore di 1008px: se lo schermo fosse ad esempio minore di 800x600px avresti un'immagine molto rimpicciolita mentre il carattere resterebbe sempre lo stesso quindi non avresti più l'effetto che ti aspetti. pensa ad esempio se lo sfondo fosse una persona: diventerebbe minuscola!

astianatte · « **Risposta #12 il:** 28 Gen 2013, 11:52:18 »

chiaro e limpido

astianatte · « **Risposta #13 il:** 06 Feb 2013, 09:35:50 »

non so cosa sia successo... ieri ho installato l'aggiornamento di joomla e il css non mi funziona più...

giovi · « **Risposta #14 il:** 06 Feb 2013, 09:40:09 »

devi riapplicare le modifiche che hai apportato perché con l'aggiornamento i template di sistema vengono ripristinati! Prima di fare un altro aggiornamento fa una copia del template ed usa quella come template predefinito!

astianatte · « **Risposta #15 il:** 06 Feb 2013, 10:34:16 »

soprattutto da questo si vede che sono un niubbo maledetto!!!

giovi · « **Risposta #16 il:** 06 Feb 2013, 10:42:53 »

ci siamo passati tutti

per le prossime volte leggi anche qualcosa sull'override in joomla (non è questo il caso però)

lupo_vfr · « **Risposta #17 il:** 28 Feb 2013, 10:54:29 »

ciao ragazzi.
è molto che non "vi" leggo. avevo realizzato un sito per un'associazione di modellismo ferroviario.
www.amicideltrenino.it
ora però serve "più potenza" e sto rifacendo da capo il sito con la versione 2.5, dato che è impossibile portare l'attuale versione alla 2.5.
Nella nuova stesura ho proprio questo problema, cioè quello di adattare l'immagine in modo che sia grande come il bgroung.
Il problema, dopo aver letto le vostre discussioni, è che non trovo il file css del template !
Il sito lo sto fabbricando in locale quindi non riesco a farvelo vedere.
Tuttavia avrei scelto il template ashton.
Sono ancora in fase sperimentale, ma sembra adattarsi bene alle nostre esigenze.
Grazie per l'aiuto.

giovi · « **Risposta #18 il:** 28 Feb 2013, 15:56:58 »

ciao, puoi inserirlo in un file css qualunque (a patto ce sia incluso in ogni pagina) ma anche nella pagina index.php stessa tra i tag <style></style>

lupo_vfr · « **Risposta #19 il:** 04 Mar 2013, 10:51:23 »

intendi l'index.php presente nella cartella del template che scelgo ?