Sfondo con colore e immagine

[freizer]

Ragazzi ho bisogno di inserire un'immagine di sfondo ad una cella che ha già un colore di fondo, è possibile farlo tramite css oppure devo inserire l'immagine come img e non richiamarla tramite css?

[paololosco]

non dare formattazione nell'html della pagina...

premesso che le tabelle dovrebbero essere usate solo per contenuti tabellari... ( immagino che la tua cella sia di una tabella con contenuti tabellari )

il tuo html dovrebbe essere cosi:

<table id="tabella">
<tr>
<td class="fondo">
</td>
</tr>
</table>

e il tuo css

#tabella .fondo{
background: #ccc /*colore background */ url('path_to_immagine/mia_immagine.jpg') top left no-repeat;
}

[freizer]

Il mio problema è un altro:

ho una tabella con un colore di sfondo
questa tabella è divisa in 2 colonne le quali hanno: la prima un colore di sfondo diverso da quello della tabella e l'altra senza colore di sfondo.

il problema è che entrambe le colonne devono avere un'immagine di sfondo in basso a destra.

Ti riporto il codice che ho di questa tabella:

<table width="717" border="0" cellspacing="0" cellpadding="0" bgcolor="#e5ddb0">
      <tr>
        <td width="226" height="400" valign="top" bgcolor="#852617">
<!-- Contenuto prima colonna nella quale devo inserire l'immagine di sfondo --!>
        </td>     
        <td width="491" valign="top" style="padding:15px; background:url(img/fondo.gif); background-position:bottom right; background-repeat:no-repeat">  
<!-- Contenuto seconda colonna nella quale devo inserire l'immagine di sfondo --!>
        </td>

sapresti darmi un consiglio?

[paololosco]

Originariamente inviato da freizer

beh non vai tanto lontano da quello che ti ho scritto prima... allora...

le formattazioni sarebbe meglio che fossero date da un CSS e non dall'html!!!

ciò premesso sarebbe meglio che questo codice

<table width="717" border="0" cellspacing="0" cellpadding="0" bgcolor="#e5ddb0">
      <tr>
        <td width="226" height="400" valign="top" bgcolor="#852617">
<!-- Contenuto prima colonna nella quale devo inserire l'immagine di sfondo --!>
        </td>     
        <td width="491" valign="top" style="padding:15px; background:url(img/fondo.gif); background-position:bottom right; background-repeat:no-repeat">  
<!-- Contenuto seconda colonna nella quale devo inserire l'immagine di sfondo --!>
        </td>

risultasse più pulito...

<table id="tabella">
      <tr>
        <td class="colonna1">
<!-- Contenuto prima colonna nella quale devo inserire l'immagine di sfondo --!>
        </td>     
        <td class="colonna2">  
<!-- Contenuto seconda colonna nella quale devo inserire l'immagine di sfondo --!>
        </td>

e css

   
#tabella{
width: 717px;
padding: 0;
background: #e5ddb0;
}
#tabella td{
margin: 0;
padding: 0;
background: url(img/fondo.gif) bottom right no-repeat;
vertical-align:top;
}
#tabella td.colonna1{
width: 226px;
height: 400px;
}
#tabella td.colonna2{
width: 491px;
height: 400px;
padding: 15px;
background-color: #852617;
}

se non è questo... non ho capito ancora...

[freizer]

In sostanza si è solo pulito il codice ma iil problema persiste:

Ho inserito il css così come lo avevi scritto tu (ho dovuto solo invertire i colori) ed ho sistemato il codice in pagina ma:

<table id="tabella">
      <tr>
        <td class="colonna1" style="background:url(img/fondo_menu.gif); background-position:bottom right; background-repeat:no-repeat">
<!-- in questa cella inserisco l'immagine di sfondo e viene visualizzata tranquillamente --!>
        </td>

il problema è nella seconda colonna:

        <td class="colonna2">  
<!-- se lo inserisco in questo modo prende il colore di fondo assegnatogli con il css  --!>
        </td>

ma in questa cella ho bisogno di inserirgli un'altra immagine di sfondo:

        <td class="colonna2" style="background:url(img/fondo.gif); background-position:bottom right; background-repeat:no-repeat">  
<!-- in questo modo inserisce l'immagine di sfondo ma non mantiene il valore del colore di fondo  --!>
        </td>

[paololosco]

quando dici "inserirgli un'altra immagine di fondo" intendi che ne vorresti 2 o una diversa????

1) nel caso tu ne volessi 2... non è possibile con CSS 2 inserire più immagini di fondo per elemento (si narra che sarà possibile con CSS 3, in ogni caso... per almeno 2 anni non ne parlerei...)

quindi ovvierei con un

al quale darai la seconda immagine di fondo

2) nel caso semplicemente tu volessi "un'immagine di fondo diversa dall'altra" è molto molto semplice...

codice di prima cosi modificato....

#tabella td{
margin: 0;
padding: 0;
vertical-align:top;
}
#tabella td.colonna1{
width: 226px;
height: 400px;
background: url(img/fondo.gif) bottom right no-repeat; 
}
#tabella td.colonna2{
width: 491px;
height: 400px;
padding: 15px;
background:#852617 url(img/fondo_menu.gif) bottom right no-repeat; 
}

in ogni caso...

NON formattare elementi grafici nell'HTML

se inserisci tutto ciò che è formattazione nel CSS è tutto molto più gestibile, modificabile, chiaro, pulito, oltre che bello da vedere nel codice

[freizer]

Grazie sei stato gentilissimo

ho risolto