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>