Esercizi Immagini Sfondo CSS

Codegrind Team•Jul 16 2023

Approfondisci l’utilizzo delle immagini di sfondo per arricchire il tuo sito web con elementi visivi affascinanti. Con questi esercizi di CSS, allenati a integrare immagini di sfondo e osserva i risultati concreti.

Esercizio 1

Crea una pagina HTML con un paragrafo all'interno. Usa il CSS per impostare un'immagine di sfondo nel paragrafo.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      p {
        background-image: url("immagine.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        padding: 20px;
        color: white;
      }
    </style>
  </head>
  <body>
    <p>Questo paragrafo ha un'immagine di sfondo.</p>
  </body>
</html>

Esercizio 2

Crea una pagina HTML con un link all'interno. Usa il CSS per impostare un'immagine di sfondo al link.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <style>
      a {
        background-image: url("icona.png");
        background-repeat: no-repeat;
        background-size: 30px 30px;
        padding: 5px 35px;
        color: black;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <a href="#">Questo link ha un'icona come sfondo.</a>
  </body>
</html>

Esercizio 3

Crea una pagina HTML con un div all'interno. Usa il CSS per impostare un'immagine di sfondo nel div e ripetila verticalmente.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      div {
        background-image: url("sfondo.jpg");
        background-repeat: repeat-y;
        height: 300px;
        width: 400px;
        padding: 20px;
        color: white;
      }
    </style>
  </head>
  <body>
    <div>Questo div ha un'immagine di sfondo ripetuta verticalmente.</div>
  </body>
</html>

Esercizio 4

Crea una pagina HTML con una lista non ordinata (ul) contenente alcuni elementi di lista (li). Usa il CSS per impostare un'immagine di sfondo a tutti gli elementi di lista.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      li {
        background-image: url("pallino.png");
        background-repeat: no-repeat;
        background-size: 20px 20px;
        padding-left: 30px;
        list-style-type: none;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ul>
  </body>
</html>

Esercizio 5

Crea una pagina HTML con una sezione divisa in due colonne (usando due div). Usa il CSS per impostare un'immagine di sfondo diversa per ciascuna colonna.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      .colonna {
        height: 200px;
        width: 50%;
        float: left;
        box-sizing: border-box;
      }

      .colonna-1 {
        background-image: url("sfondo1.jpg");
        background-repeat: no-repeat;
        background-size: cover;
      }

      .colonna-2 {
        background-image: url("sfondo2.jpg");
        background-repeat: no-repeat;
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <div class="colonna colonna-1"></div>
    <div class="colonna colonna-2"></div>
  </body>
</html>

Esercizio 6

Crea una pagina HTML con un titolo all'interno. Usa il CSS per impostare un'immagine di sfondo al titolo.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
    <style>
      h1 {
        background-image: url("titolo-bg.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        padding: 50px;
        color: white;
      }
    </style>
  </head>
  <body>
    <h1>Questo è un titolo con uno sfondo personalizzato.</h1>
  </body>
</html>

Esercizio 7

Crea una pagina HTML con una sezione divisa in tre colonne (usando tre div). Usa il CSS per impostare un'immagine di sfondo differente per ciascuna colonna e ripetila orizzontalmente.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
    <style>
      .colonna {
        height: 200px;
        width: 30%;
        float: left;
        box-sizing: border-box;
        background-repeat: repeat-x;
      }

      .colonna-1 {
        background-image: url("colonna1.jpg");
      }

      .colonna-2 {
        background-image: url("colonna2.jpg");
      }

      .colonna-3 {
        background-image: url("colonna3.jpg");
      }
    </style>
  </head>
  <body>
    <div class="colonna colonna-1"></div>
    <div class="colonna colonna-2"></div>
    <div class="colonna colonna-3"></div>
  </body>
</html>

Esercizio 8

Crea una pagina HTML con un link all'interno. Usa il CSS per impostare un'immagine di sfondo al link e ripetila solo orizzontalmente.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      a {
        background-image: url("sfondo-link.png");
        background-repeat: repeat-x;
        padding: 5px 35px;
        color: black;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <a href="#"
      >Questo link ha un'immagine di sfondo ripetuta orizzontalmente.</a
    >
  </body>
</html>

Esercizio 9

Crea una pagina HTML con un div all'interno. Usa il CSS per impostare un'immagine di sfondo nel div e posizionala al centro orizzontalmente e verticalmente.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      div {
        background-image: url("sfondo.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        height: 400px;
        width: 600px;
        position: relative;
      }

      img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div>
      <img src="logo.png" alt="Logo" />
    </div>
  </body>
</html>

Esercizio 10

Crea una pagina HTML con un titolo all'interno. Usa il CSS per impostare un'immagine di sfondo al titolo e ripetila solo orizzontalmente.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
    <style>
      h1 {
        background-image: url("sfondo-titolo.jpg");
        background-repeat: repeat-x;
        padding: 20px;
        color: white;
      }
    </style>
  </head>
  <body>
    <h1>
      Questo è un titolo con un'immagine di sfondo ripetuta orizzontalmente.
    </h1>
  </body>
</html>