Immagine di background

**dreaman74** · 02-02-2007, 05:12

ho settato la proprietà di una colonna in questo modo:

codice:

background: #DDDDDD url(gif/Globo.gif) right no-repeat 10 0;

Ma come faccio ad portarla oltre il margine destro di tot pixel?

Grazie a tutti.

**ricman** · 02-02-2007, 11:05

Originariamente inviato da dreaman74
ho settato la proprietà di una colonna in questo modo:

codice:

background: #DDDDDD url(gif/Globo.gif) right no-repeat 10 0;

Ma come faccio ad portarla oltre il margine destro di tot pixel?

Aggiungerai i px che ti servono...

background: #DDDDDD url(gif/Globo.gif) right no-repeat 10px 20px;

**Mich_** · 02-02-2007, 11:06

Anzitutto in quel codice c'e` un errore: il right e` sbagliato di posto e di sintassi: http://www.w3schools.com/css/css_reference.asp

L'ordine dei valori nell'attributi background e` importante:
color image repeat attachment position
Puoi eventualmente saltarne qualcuno, ma non cambiarne l'ordine (pero` IE accetta quasi qualsiasi ordine).

La posizione (background-position) puoi specificarla mediante una coppia di parole chiave (e allora la pos. vert precede quella orizz), o tramite delle % o una unita` di misura dei CSS (e in tal caso la pos. orizz precede quella vert).

Per spostarla a destra, devi quindi specificare la posizione.
Se la dimensione del blocco e` nota, ti basta spostare lo sfondo della quantita` opportuna.
Altrimenti puoi giocare con le %.

Esempio:
background: #ddd url(gif/Globo.gif) no-repeat 103% 0;

PS: non so a cosa serva: a quel punto non lo si vede o sfondo.

**dreaman74** · 02-02-2007, 12:02

E' una delle poche volte che uso questo "TAG" per i CSS, ed ammetto che non ho molta pratica... parlatemi di asp vb-script.

Grazie per le esaustive risposte. Provo subito.

**dreaman74** · 02-02-2007, 12:55

Grazie per i consigli, tra la'tro ho tovato molto utile il link passatomi da Mich_

Ora che ho capito la giusta sintassi del tag reference, vengo a sottoporvi un nuovo problema che mi si presenta in fase di visualizzazione. Infatti la visualizzazione su Firefox differisce da Explorer 6. La posizione dello sfondo dell'immagine camba in base al browser utilizzato.

ecco il codice usato per definire le teabelle:

codice:

<style type="text/css">

html, body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: Arial, Helvetica, sans-serif;
background: #333333;
}

.rigasuperiore {
text-align: center;
background-color: #333333;
background-image: url(gif/FondinoOblique.gif);
background-repeat: repeat;
background-attachment: fixed;
background-position: 0 0;
}

.rigainferiore {
/* border-top: 5px solid #FFAA00; */
text-align: center;
background-color: #DDDDDD;
background-image: url(gif/Globo.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 120% 20%;
}

/* altri stili... */

</style>

<body>

<table cellpadding=0 cellspacing=0 width=100% height=100%>


<tr>
<td height=40% class=rigasuperiore>
... contenuto
</td>
</tr>


<tr>
<td height=60% class=rigainferiore>
<img src=gif/logoIndex.gif>
</td>
</tr>

</table>

</body>

Firefox visualizza l'immagine "gif/Globo.gif" al centro fra i due <tr>, mentre IE la visualizza bene all'interno del secondo </tr>.

Come posso risolvere? Grazie

**Mich_** · 02-02-2007, 13:04

Comincia con il togliere gli attributi di formattazione dal codice HTML (height=40%, cellpadding=0 cellspacing=0, ...), spostandoli nei CSS: infatti tali attributi creano conflitto con i corrispondenti attributi CSS, ed i browser possono interpretare a modo loro.
Ed usa una sintassi corretta: ti mancano un mucchio di virgolette (o apici).

Non e` detto che questo risolva il tuo problema, ma sicuramente inserire delle cose a "libera interpretazione" non giova.

**ricman** · 02-02-2007, 13:15

Originariamente inviato da Mich_
Ed usa una sintassi corretta: ti mancano un mucchio di virgolette (o apici).

Sarà una combinazione ma è un vizio che ha pure un mio amico che la vora in ASP.Net
Può darsi che sia il VisualStudio ad abituare a certe cose... mah

**dreaman74** · 02-02-2007, 13:18

sinceramente gli apici li ho sempre usati, è la prima volta che lo faccio... visto che alcune volte mi è capitato di vederli omessi!!!

Isentico problema dopo le modifiche apportate:

codice:

<style text="text/css">
html, body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: Arial, Helvetica, sans-serif;
background: #333333;
}

.tabellaprincipale {
width: 100%;
height: 100%;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

.rigasuperiore {
text-align: center;
height: 40%;
background-color: #333333;
background-image: url(gif/FondinoOblique.gif);
background-repeat: repeat;
background-attachment: fixed;
background-position: 0 0;
}

.rigainferiore {
/* border-top: 5px solid #FFAA00; */
text-align: center;
height: 60%;
background-color: #DDDDDD;
background-image: url(gif/Globo.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 120% 20%;
}
</style>

<Body>
<table class="tabellaprincipale">
<tr>
<td class="rigasuperiore">
...contenuto
</td>
</tr>
<tr>
<td class="rigainferiore">
[img]gif/logoIndex.gif[/img]
</td>
</tr>
</table>

</body>

**dreaman74** · 02-02-2007, 13:28

Ho notato che Firefox a differenza di IE prende in considerazione la tabella completa per il posizionamento dell'immagine e non il secondo <Tr> come volgio io.

**Mich_** · 02-02-2007, 13:31

Ti manca sicuramente un
height: 100%;
nel body e nel html
altrimenti il tuo height:100% della tabella non ha significato (e` il 100% di un valore non definito).

Per quanto riguarda la sintassi "a pressapoco":
I browser accettano anche sintassi non corrette, quando ritengono di poter interpretare la volonta` del programmatore. E` un grosso problema nel Web, perche` poi i browser non sono tutti uguali, ed alcuni interpretano anche gli errori, altri no.
E mentre il 99% e rotti dei browser in giro non danno problemi, ci sono i browser di nicchia che non riescono a visualizzare: e chi ci rimette sono proprio quegli utenti che non possono fare a meno delle tecnologie: come dire "chi e` gia` sfortunato di suo, deve anche sorbirsi i lati negativi del pressapochismo dei programmatori"

Discussione: Immagine di background

Strumenti discussione

Ricerca discussione

Visualizza

Immagine di background

Re: Immagine di background

Problemi di visualizzazione con lo stile background

Permessi di invio