Aiuto! cambio immagine di sfondo al cambio pagina

Fabrizio5778 · 15 Feb 2023

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 · 15 Feb 2023

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.

Fabrizio5778 · 15 Feb 2023

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.

Ti ringrazio infinitamente. Farò delle prove! grazie ancora!

Cerca

Cerca

Aiuto! cambio immagine di sfondo al cambio pagina

Fabrizio5778

Nuovo Utente

WmbertSea

Moderatore

Fabrizio5778

Nuovo Utente

Discussioni simili