Aiuto! cambio immagine di sfondo al cambio pagina

F

Fabrizio5778

Nuovo Utente
21 Set 2022
4
0
1
Ciao a tutti,

non mi collego al forum da un bel po'. Sono un web designer alle primissime armi.
Avrei bisogno di un piccolo aiuto per un sito abbastanza semplice che sto realizzando per una compagnia audiovisiva amatoriale con cui collaboro.
Il progetto che ho sviluppato, prevede che ogni pagina abbia una immagine di sfondo specifica.
Per adesso, sulla home page, ho inserito l'immagine di sfondo da css, sul tag html.
Ora il mio problema è: come faccio a far cambiare l'immagine di sfondo per ogni pagina? è possibile farlo utilizzando un unico file css? Devo usare Javascript (lo conosco molto poco).
Avevo anche provato a mettere un div subito dopo il body che racchiudesse tutto il contenuto, ma mi mette un margine superiore che non riesco ad eliminare in nessun modo.
Scusate il mio livello infimo, se qualcuno potesse aiutarmi gliene sarei molto grato!

Grazie infinite!
 
WmbertSea

WmbertSea

Moderatore
Membro dello Staff
MOD
28 Nov 2014
435
73
28
Ciao, si può risolvere in tanti modi, non necessariamente hai bisogno di javascript e, sì, potresti usare un unico css.

Potresti usare una specifica "classe" (o un "id") che vai ad applicare al tuo <div> o al <body> per fare in modo che ci sia un riferimento con la pagina corrente. Quindi impostare una relativa immagine come sfondo per ognuna delle specifiche classi.

Un esempio molto banale:
HTML: 
<!DOCTYPE HTML>
<html lang="it">
  <head>
    <title>Esempio</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        margin: 0;
        background: 50%/cover;
      }
      body.pagina_1 { background-image: url(images/img_1.jpg) }
      body.pagina_2 { background-image: url(images/img_2.jpg) }
      body.pagina_3 { background-image: url(images/img_3.jpg) }
      body.pagina_4 { background-image: url(images/img_4.jpg) }
    </style>
  </head>
  <body class="pagina_1">
    Lorem ipsum dolor sit amet
  </body>
</html>

In questo caso ho applicato la classe .pagina_1 al tag <body>. Per ogni pagina quindi andrai ad applicare una classe diversa, relativamente alla pagina stessa.

Ripeto, questa è una delle possibili soluzioni, supponendo di avere delle semplici pagine html, ma in base al contesto o alle eventuali necessità potrebbe essere necessario o preferibile usare altre soluzioni.
 
F

Fabrizio5778

Nuovo Utente
21 Set 2022
4
0
1
WmbertSea ha scritto:
Ciao, si può risolvere in tanti modi, non necessariamente hai bisogno di javascript e, sì, potresti usare un unico css.

Potresti usare una specifica "classe" (o un "id") che vai ad applicare al tuo <div> o al <body> per fare in modo che ci sia un riferimento con la pagina corrente. Quindi impostare una relativa immagine come sfondo per ognuna delle specifiche classi.

Un esempio molto banale:
HTML: 
<!DOCTYPE HTML>
<html lang="it">
  <head>
    <title>Esempio</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        margin: 0;
        background: 50%/cover;
      }
      body.pagina_1 { background-image: url(images/img_1.jpg) }
      body.pagina_2 { background-image: url(images/img_2.jpg) }
      body.pagina_3 { background-image: url(images/img_3.jpg) }
      body.pagina_4 { background-image: url(images/img_4.jpg) }
    </style>
  </head>
  <body class="pagina_1">
    Lorem ipsum dolor sit amet
  </body>
</html>

In questo caso ho applicato la classe .pagina_1 al tag <body>. Per ogni pagina quindi andrai ad applicare una classe diversa, relativamente alla pagina stessa.

Ripeto, questa è una delle possibili soluzioni, supponendo di avere delle semplici pagine html, ma in base al contesto o alle eventuali necessità potrebbe essere necessario o preferibile usare altre soluzioni.
Clicca per allargare...
Ti ringrazio infinitamente. Farò delle prove! grazie ancora!
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
E Aiuto per query PHP 8
R Aiuto ripristino sito web Presentati al Forum 0
L Aiuto con DataGridView Visual Basic 1
I aiuto urgente per thunderbird Posta Elettronica 0
I aiuto per outlook Posta Elettronica 0
D aiuto funzioni javascript Javascript 1
T aiuto per trasformare un quiz fatto in JS in un quiz in JQUERY jQuery 0
D Aiuto CSS in ELEMENTOR - Cambiare un testo CMS (Content Management System) 0
M Fullcalendar in Codeigniter, un aiuto per la chiamata $ajax ? jQuery 0
K Aiuto con file audio in html HTML e CSS 1
G Script notifiche dekstop aiuto Javascript 0
P Aiuto per rendere un Bot Telegram Privato PHP 1
M Un aiuto da chi ha apple Mac e Software 0
P Richiesta di aiuto Presentati al Forum 1
A Aiuto per pagina php PHP 0
M Questa pagina non carica correttamente Google Maps: aiuto!! HTML e CSS 1
I Aiuto php Dependent Lookup PHP 0
R Aiuto con le query MS Access 2
M AIUTO ESERCIZIO JAVA Javascript 1
G Aiuto con htaccess e rewriterule PHP 0
T cercasi aiuto per file d1 (open-edge db) Database 0
M Aiuto con inserimento immagini WordPress 6
D aiuto schermata photoshop Photoshop 0
L Aiuto per programma web php/mySQL PHP 2
A Aiuto php colore diverso PHP 10
L Aiuto creazione menu mancante WordPress 0
C Aiuto compiuto scuola PHP/MySQL PHP 2
G Insert into select - Aiuto MySQL 0
I Aiuto bash linux Programmazione 1
F Aiuto java script Javascript 2
R Cerco aiuto Offerte e Richieste di Lavoro e/o Collaborazione 7
I Aiuto query MySQL 8
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
motleyrulez Aiuto con un ciclo PHP 0
R Aiuto sito html Offerte e Richieste di Lavoro e/o Collaborazione 3
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
G Mi dite come faccio? Aiuto photoshop ? Photoshop 1
C prestashop paragamento contrassegno aiuto modulo E-Commerce 0
Michelebozzo [PHP] Rimuovere pubblicazione nome pagina ... aiuto! PHP 7
Caldus richiesta aiuto Mac e Software 0
R [Javascript] Aiuto su questo script Javascript 2
Z Gestionale in Php/mysql: Quanto farsi pagare? Aiuto! Discussioni Varie 0
Giacomo92 [HTML] AIUTO!! Regular Expression :( Offerte e Richieste di Lavoro e/o Collaborazione 15
T Aiuto per php7 e mysqli PHP 3
T mysql tutorial per importare tabelle access in mysql aiuto MySQL 2
K [Java] aiuto switch case Java 1
E salve tutti spero si essere di aiuto e di trovare aiuto Presentati al Forum 2
D [MS Access] aiuto non riesco a capire MS Access 6
P [PHP] Browser game, aiuto a tempo libero. Offerte e Richieste di Lavoro e/o Collaborazione 0
wildcity9 aiuto per sbloccare account instagram bannati Social Media Marketing 0

Discussioni simili

Alto Basso