Compito precedente
Sfondi5/14
Torna all'elenco delle attività
  1. 1. Proprietà background-color
  2. 2. Proprietà background-image
  3. 3. Proprietà background-repeat
  4. 4. Proprietà background-position
  5. 5. Ancora un po' di background-position
  6. 6. Proprietà background-attachment
  7. 7. Proprietà background
  8. 8. Formato JPEG
  9. 9. Formato PNG-8
  10. 10. Formato PNG-24
  11. 11. Formato GIF
  12. 12. Elementi annidati con sfondi
  13. 13. Effetti con sfondi ripetuti
  14. 14. Sprites
Compito successivo
  • Corsi
  • Registrazione
  • Accedi

Caricamento...
In pochi secondi sarà pronto.

  • Teoria
  • Teoria

Ancora un po' di background-position

Quando l'immagine di sfondo è più grande del blocco, viene ritagliata. È inoltre possibile controllare quale parte dell'immagine sarà visibile utilizzando la proprietà background-position.

A volte è conveniente utilizzare valori relativi (percentuali) e a volte valori assoluti (pixel).

A proposito, è possibile utilizzare non solo valori positivi ma anche negativi. E anche combinare pixel e percentuali.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="it"> <head> <meta charset="utf-8"> <title>Ancora un po' di background-position</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block block1"></div> <div class="block block2"></div> <br> <div class="block block3"></div> <div class="block block4"></div> </body> </html>
CSS
body { padding: 10px; text-align: center; } .block { display: inline-block; width: 200px; height: 200px; margin: 5px; background-color: #34495e; background-image: url("instructor.jpg"); background-repeat: no-repeat; border-radius: 5px; box-shadow: 1px 1px 3px #999999; } .block1 { } .block2 { } .block3 { } .block4 { }

Il codice è cambiato, fai clic su "Aggiorna" o attiva l'esecuzione automatica.

Sei passato a un'altra pagina

Fare clic all'interno del mini-browser per evidenziare questa finestra.

100%
ObiettiviFatto
0

    Impostare i blocchi in modo che abbiano un layout di sfondo:

    1. -60px -100px al primo blocco,
    2. 70% 25% al secondo blocco,
    3. -50px 80% al terzo blocco,
    4. -250px 80%; al quarto blocco.

    © 2023-2024, codegym.study