Back to top

Autore Topic: Immagine di background con link  (Letto 9733 volte)

Offline pespe

  • Esploratore
  • **
  • Post: 70
  • Sesso: Maschio
    • Mostra profilo
Immagine di background con link
« il: 20 Ago 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:
Codice: [Seleziona]
#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:
Codice: [Seleziona]
<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 che gestiamo da soli. Ogni consiglio è gradito.
Grazie.

Offline mattyfog

  • Appassionato
  • ***
  • Post: 346
    • Mostra profilo
Re:Immagine di background con link
« Risposta #1 il: 20 Ago 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

Offline pespe

  • Esploratore
  • **
  • Post: 70
  • Sesso: Maschio
    • Mostra profilo
Re:Immagine di background con link
« Risposta #2 il: 20 Ago 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.
« Ultima modifica: 20 Ago 2010, 13:47:18 da pespe »

Offline mattyfog

  • Appassionato
  • ***
  • Post: 346
    • Mostra profilo
Re:Immagine di background con link
« Risposta #3 il: 20 Ago 2010, 14:08:51 »
Che problema avevi?
Perchè non andava?

Offline pespe

  • Esploratore
  • **
  • Post: 70
  • Sesso: Maschio
    • Mostra profilo
Re:Immagine di background con link
« Risposta #4 il: 20 Ago 2010, 14:29:39 »
Per inserire l'immagine in background avevo usato nel CSS:
Codice: [Seleziona]
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:
Codice: [Seleziona]
#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.

Offline tonicopi

  • Global Moderator
  • Instancabile
  • ********
  • Post: 12790
  • Sesso: Maschio
    • Mostra profilo
Re:Immagine di background con link
« Risposta #5 il: 20 Ago 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!  ;)
joomlacsszengarden.com = il giardino dei css di Joomla!
L'attesa del piacere è essa stessa... piacere!

Offline ashtur1

  • Esploratore
  • **
  • Post: 133
    • Mostra profilo
Re:Immagine di background con link
« Risposta #6 il: 20 Ago 2010, 16:50:14 »
Per rendere cliccabile un'immagine di sfondo basta adottare la tecnica dell'image replacement.

Su google ne trovi diverse :)
BRAINCODE - Sviluppo portali e web applications Joomla!
Full service Web Agency

Offline mattyfog

  • Appassionato
  • ***
  • Post: 346
    • Mostra profilo
Re:Immagine di background con link
« Risposta #7 il: 20 Ago 2010, 19:25:56 »
Codice: [Seleziona]
body
{
height: 100%;
        width: 100%;
        margin: 0;
padding: 0;

}
Poi dovendolo linkare ho aggiunto:
Codice: [Seleziona]
#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.
« Ultima modifica: 20 Ago 2010, 19:36:58 da mattyfog »

Offline pespe

  • Esploratore
  • **
  • Post: 70
  • Sesso: Maschio
    • Mostra profilo
Re:Immagine di background con link
« Risposta #8 il: 23 Ago 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

Offline pespe

  • Esploratore
  • **
  • Post: 70
  • Sesso: Maschio
    • Mostra profilo
Re:Immagine di background con link
« Risposta #9 il: 23 Ago 2010, 14:39:59 »
Citazione
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 ... proverò anche gli altri consigli !!!!
Grazie a tutti.

Offline mattyfog

  • Appassionato
  • ***
  • Post: 346
    • Mostra profilo
Re:Immagine di background con link
« Risposta #10 il: 26 Ago 2010, 09:07:04 »
Ma io non riesco a cliccare sullo sfondo!

Offline omar2k

  • Nuovo arrivato
  • *
  • Post: 1
    • Mostra profilo
Re:Immagine di background con link
« Risposta #11 il: 10 Dic 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]

 



Web Design Bolzano Kreatif