Joomla.it Forum

Joomla! 1.5.x (versione con supporto terminato) => Joomla! 1.5 => I Template di Joomla 1.5.x => : pespe 20 Aug 2010, 11:30:22

: Immagine di background con link
: pespe 20 Aug 2010, 11:30:22
Salve a tutti,
ho (avrei) la necessità di inserire un'immagine fissa a tutta pagina come sfondo del template (fin qui ci sono arrivato), ora questa immagine dovrebbe essere linkabile (e qui mi blocco).
Ho provato questa soluzione:

Nel CSS:
:
#adv-link a {
margin: 0 auto;
padding: 0;
background-color: #ffffff;
background-image: url('../images/fondo.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;*/

Nel codice HTML:
:
<div id="adv-link"><a href="#">Link ADV</a></div>
ma non funziona, dove sbaglio, sono proprio lontano dalla soluzione?
Il sito è un piccolo quotidiano regionale www.leggimi.eu (http://www.leggimi.eu) che gestiamo da soli. Ogni consiglio è gradito.
Grazie.
: Re:Immagine di background con link
: mattyfog 20 Aug 2010, 11:42:45
Non ho trovato il punto del codice in cui hai inserito <div id="adv-link"><a href="#">Link ADV[/url]</div> comunque prova a settare qualcosa tipo:
#adv-link a {
height: 100%;
width: 100%;
display: block;
... (aggiungi quello che hai scritto tu sotto)
}

chiaramente però per funzionare dovresti inserirlo subito sotto <body> e anche il body deve avere queste regole:
body {
width: 100%;
height: 100%;
}

Se non va mi spiace, sto imparando anch'io :D
: Re:Immagine di background con link
: pespe 20 Aug 2010, 11:51:50
... il codice non lo hai trovato perchè lo tolto (veniva fuori uno schifo) ...
Provo a modificare secondo le tue indicazioni e ... speriamo, in ogni caso grazie 1000.
-----------------------------
Aggiornamento
Niente da fare, non funge !!!!.
Grazie lo stesso.
: Re:Immagine di background con link
: mattyfog 20 Aug 2010, 14:08:51
Che problema avevi?
Perchè non andava?
: Re:Immagine di background con link
: pespe 20 Aug 2010, 14:29:39
Per inserire l'immagine in background avevo usato nel CSS:
:
body
{
height: 100%;
        width: 100%;
        margin: 0 auto;
padding: 0;
background-image: url('../images/fondo.jpg');    <------------------- File immagine|
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;*/

}
Poi dovendolo linkare ho aggiunto:
:
#adv-link a {
        height: 100%;
        width: 100%;
        display: block;
margin: 0 auto;
padding: 0;
background-image: url('../images/fondo.jpg');  <------------------- File immagine|
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;*/

}
e il DIV nell'HTML. Ovviamente ho dovuto togliere "background-image" dal body, ormai inutile.
Il problema ora è che l'immagine non è più in background e quindi l'intero sito slitta in basso sotto l'immagine stessa. Non so se sono riuscito a spiegarmi, ma se sei on-line/disponibile rimetto tutto su e ti faccio vedere.
: Re:Immagine di background con link
: tonicopi 20 Aug 2010, 15:32:55
Mi par di aver capito che vuoi rendere cliccabile lo sfondo del sito, che mi pare un'assurdità. Tuttavia se vogliamo discutere di come rendere cliccabile una immagine di sfondo diciamo pure che non è possibile. Ma ci possiamo girare attorno, con un work around, dicono gli inglesi,  e rendere apparentemente cliccabile anche una immagine di sfondo. Non ci dobbiamo inventare nulla. Basta guardare come realizza ciò il template ja_purity di default in Joomla!  ;)
: Re:Immagine di background con link
: ashtur1 20 Aug 2010, 16:50:14
Per rendere cliccabile un'immagine di sfondo basta adottare la tecnica dell'image replacement.

Su google ne trovi diverse :)
: Re:Immagine di background con link
: mattyfog 20 Aug 2010, 19:25:56
:
body
{
height: 100%;
        width: 100%;
        margin: 0;
padding: 0;

}
Poi dovendolo linkare ho aggiunto:
:
#adv-link {
        height: 100%;
        width: 100%;
        display: block;
margin: 0 auto;
padding: 0;
background-image: url('../images/fondo.jpg');  <------------------- File immagine|
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;*/

}

<body>
<a href="#" id="adv-link"></a>
</body>

A me funziona, forse prima non mi ero spiegato tanto bene :P
Ti consiglio poi, per non avere problemi (ma se ci fossero fai così) di settare anche lo z-index uguale a 0 all'elemento a con id #adv-link e di crearte un div in cui inserire tutto il resto della pagina con z-index uguale a 1.

Perchè bisognerebbe usare tanti trucchetti? Questo è semplice css e funziona:
prendi un elemento a lo rendi grande come tutta la pagina, con lo z-index lo metti in secondo piano e poi ci assegni un background.
: Re:Immagine di background con link
: pespe 23 Aug 2010, 10:03:39
Mi par di aver capito che vuoi rendere cliccabile lo sfondo del sito, che mi pare un'assurdità.

.... posso capirti ;-) ... mi serve semplicemente per cercare di vendere qualche pubblicità in più.
Ci manteniamo solo con quella.
In ogni caso, grazie del consiglio
: Re:Immagine di background con link
: pespe 23 Aug 2010, 14:39:59
A me funziona, forse prima non mi ero spiegato tanto bene
... è molto più probabile che sia io a non capire  :P.
In ogni caso ho risolto per ora così http://www.leggimi.eu (http://www.leggimi.eu) ... proverò anche gli altri consigli !!!!
Grazie a tutti.
: Re:Immagine di background con link
: mattyfog 26 Aug 2010, 09:07:04
Ma io non riesco a cliccare sullo sfondo!
: Re:Immagine di background con link
: omar2k 10 Dec 2010, 16:15:11
Ragazzi ho un problema..
Il vostro metodo funziona ma mi da un problema...
Lo sfondo slitta sotto il div dell'immagine cliccabile... allego uno screenshot
Come risolvo?
Grazie
Omar


[allegato eliminato da un amministratore]