caricare su ogni singola pag. html background-image differente

**alexlisca** · 16-09-2008, 21:16

Ciao... mi chiedevo se per ogni singola pag. html era possibile cambiare il background-image di fondo tramite css :master:
ovvero la pag index.html avra 1 background-image mente al pag contatti.html 1 altro
ecc ecc
il mio css e questo:
* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 1000px;
height: 595px;
}
#header {
width: 950px;
color: #333;
padding: 0%;
border: 0px solid #45322E;
height: 145px;
margin: 5px 0px 0px 25px;
background-image: url(immaginisito/t4.jpg);
}
#navigation {
width: 950px;
color: #333;
padding: 0%;
border: 0px solid #45322E;
margin: 0px 0px 0px 25px;
background-image: url(immaginisito/m4.jpg);
height: 50px;
}
#content {
width: 950px;
color: #333;
border: 0px solid #45322E;
background-image: url(immaginisito/c4.jpg);
margin: 0px 0px 0px 25px;
padding: 0%;
height: 350px;
}
#footer {
width: 950px;
color: #333;
border: 0px solid #473624;
background-image: url(immaginisito/f4.jpg);
margin: 0px 0px 0px 25px;
padding: 0%;
height: 45px;
}
grazie

**fcaldera** · 16-09-2008, 21:26

definisci il background-image direttamente nel tag body

<body style="...">

**alexlisca** · 16-09-2008, 21:34

Originariamente inviato da fcaldera
definisci il background-image direttamente nel tag body

<body style="...">

quindi da html ?
ma se in css il container da delle dimensioni precise sia in alt*larg. e l' immagine di background-image idem come il comtainer
come faccioa a posizionarla con le stesse misure e margini sx/dx ?
non potresti darmi + info in merito alla stringa che hai scritto ?
dove la metto esattamente ?
grazie

**fcaldera** · 16-09-2008, 22:14

il css non è solo quello che si include con i file con estensione .css
lo si può inserire nell'header di un file html
ma anche direttamente come attributo style, all'interno di un qualsiasi tag del body (body incluso)

Se hai 7, 50 o 10000 pagine identiche che differiscono solo per un'immagine di sfondo, quale sarebbe per te l'alternativa? Assegni 7, 50 o 10000 id diversi ai vari tag body (o altro) e poi crei 7, 50... (ecc). regole diverse nel file .css?

non sarebbe poco performante far caricare 10000 regole in più ad una pagina, quando in realtà gliene serve una sola di quelle 10000?

ecco quindi l'utilità di mettere un "inline style"

devi cambiare solo lo sfondo del body in una certa pagina?
In quella certa pagina scriverai <body style="background-image: url(...)">

**alexlisca** · 16-09-2008, 23:52

Originariamente inviato da fcaldera
il css non è solo quello che si include con i file con estensione .css
lo si può inserire nell'header di un file html
ma anche direttamente come attributo style, all'interno di un qualsiasi tag del body (body incluso)

Se hai 7, 50 o 10000 pagine identiche che differiscono solo per un'immagine di sfondo, quale sarebbe per te l'alternativa? Assegni 7, 50 o 10000 id diversi ai vari tag body (o altro) e poi crei 7, 50... (ecc). regole diverse nel file .css?

non sarebbe poco performante far caricare 10000 regole in più ad una pagina, quando in realtà gliene serve una sola di quelle 10000?

ecco quindi l'utilità di mettere un "inline style"

devi cambiare solo lo sfondo del body in una certa pagina?
In quella certa pagina scriverai <body style="background-image: url(...)">

in effetti il tuo ragionamente è pienamente logico... solo che:
allora nel mio css devo togliere la riga riguardante al:
background-image: url(immaginisito/t4.jpg); del header ad esempio ?
se la mi pag. html è queta: http://lisca.altervista.org/barozzidanilo/index.html
la riga che mi hai indicato la posiziono prima della chiusura del </body> ma se voglio solo cambiare l' header di alcune pag come faccio x posizionarlo nello stesso punto ?
il body non riguarda tutta la pag. :master:
ho capito il raginamento ma non mi è chiaro come metterlo in pratica

grazie

**TeraBIT** · 17-09-2008, 01:23

altrimenti invece di utilizzare l'attributo "body" o stili in linea puoi usare un piccolo trucchetto, ti crei un div contenitore a cui associerai un ID diverso per ciascuna pagina e potrai definrli tutti nel singolo foglio css l'immagine di background, basterà impostare per tutti il posizionamento su "absolute", altezza e larghezza su 100% perchè si espanda su tutta la finestra(e ne segua le dimensioni), inserendo poi un parametro z-index negativo(tipo -10, o -50, come vuoi) il div andrà sotto tutti gli elementi con z-index superiore, in questo modo potrai personalizzare il background per ogni pagina che lo richieda, o usando png trasparenti potrei usare un background body per tutte per poi variare solo parte del background, le possibilità e combinazioni sono infinite...

**fcaldera** · 17-09-2008, 08:22

Mi sembra tu abbia le idee un po' confuse...

Originariamente inviato da alexlisca
il body non riguarda tutta la pag. :master:

e da quando?

il body contiene tutto il layout

poi non confondere "header" <head>...</head>
con "header" inteso come "sezione" della pagina

Originariamente inviato da alexlisca
la riga che mi hai indicato la posiziono prima della chiusura del </body>

ma non devi aggiungere un'altro tag body
devi averne una sola coppia per pagina, ma dentro quello di apertura che già hai aggiungi un attributo style="..."
se poi hai più sfondi da cambiare per pagina aggiungi l'attributo style in corrispondenza degli altri elementi.

**alexlisca** · 17-09-2008, 10:28

Originariamente inviato da fcaldera
Mi sembra tu abbia le idee un po' confuse...

e da quando?

il body contiene tutto il layout

poi non confondere "header" <head>...</head>
con "header" inteso come "sezione" della pagina

ma non devi aggiungere un'altro tag body
devi averne una sola coppia per pagina, ma dentro quello di apertura che già hai aggiungi un attributo style="..."
se poi hai più sfondi da cambiare per pagina aggiungi l'attributo style in corrispondenza degli altri elementi.

ribadisco ho capito bene o male il concetto
ma al lato pratico come cod. non mi trovo

cosa dovrei aggiungere esattamente e in che punto ?
ovvero se io voglio solo cambiare lo sfondo del' header del tag css come mi comporto ?

**fcaldera** · 17-09-2008, 12:02

hai una regola #header {...}

quindi avrai anche un elemento del tipo <div id="header">...</div>

e quindi scriverai <div id="header" style="background-image: ... ">...</div>

**alexlisca** · 17-09-2008, 12:52

Originariamente inviato da fcaldera
hai una regola #header {...}

quindi avrai anche un elemento del tipo <div id="header">...</div>

e quindi scriverai <div id="header" style="background-image: ... ">...</div>

quindi dovrei scrivere all' interno di:

<div id="header"></div>

<div id="header" style="background-image: ... ">...</div>

e al posto di background-image: ... il percorso della carella con l' immagine
<div id="header" style="background-image: url(immaginisito/c4.jpg)</div> giusto ? :master:
speriamo che funzioni

Discussione: caricare su ogni singola pag. html background-image differente

Strumenti discussione

Ricerca discussione

Visualizza

caricare su ogni singola pag. html background-image differente

Permessi di invio