Home esercizi css immagini di sfondo

Esercizi Immagini Sfondo CSS

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>