CSS - Sfondi

Questo capitolo insegna come impostare gli sfondi di vari elementi HTML. È possibile impostare le seguenti proprietà di sfondo di un elemento:

  • Il background-color viene utilizzata per impostare il colore di sfondo di un elemento.

  • Il background-image viene utilizzata per impostare l'immagine di sfondo di un elemento.

  • Il background-repeat viene utilizzata per controllare la ripetizione di un'immagine sullo sfondo.

  • Il background-position viene utilizzata per controllare la posizione di un'immagine sullo sfondo.

  • Il background-attachment viene utilizzata per controllare lo scorrimento di un'immagine sullo sfondo.

  • Il background viene utilizzata come scorciatoia per specificare una serie di altre proprietà dello sfondo.

Imposta il colore di sfondo

Di seguito è riportato l'esempio che mostra come impostare il colore di sfondo per un elemento.

<html>
   <head>
   </head>

   <body>
      <p style = "background-color:yellow;">
         This text has a yellow background color.
      </p>
   </body>
</html>

Questo produrrà il seguente risultato:

Imposta l'immagine di sfondo

Possiamo impostare l'immagine di sfondo chiamando le immagini memorizzate in locale come mostrato di seguito -

<html>
   <head>
      <style>
         body  {
            background-image: url("/css/images/css.jpg");
            background-color: #cccccc;
         }
      </style>
   </head>
   
   <body>
      <h1>Hello World!</h1>
   </body>
<html>

Produrrà il seguente risultato:

Ripeti l'immagine di sfondo

L'esempio seguente mostra come ripetere l'immagine di sfondo se un'immagine è piccola. Puoi usare il valore no-repeat per la proprietà background-repeat se non vuoi ripetere un'immagine, in questo caso l'immagine verrà visualizzata solo una volta.

Per impostazione predefinita , la proprietà di ripetizione dello sfondo avrà un valore di ripetizione .

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

Produrrà il seguente risultato:

Il seguente esempio che mostra come ripetere l'immagine di sfondo verticalmente.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-y;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

Produrrà il seguente risultato:

L'esempio seguente mostra come ripetere l'immagine di sfondo orizzontalmente.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-x;
         }
      </style>
   </head>
   
   <body>
      <p>Tutorials point</p>
   </body>
</html>

Produrrà il seguente risultato:

Imposta la posizione dell'immagine di sfondo

L'esempio seguente mostra come impostare la posizione dell'immagine di sfondo a 100 pixel dal lato sinistro.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

Produrrà il seguente risultato:

L'esempio seguente mostra come impostare la posizione dell'immagine di sfondo a 100 pixel di distanza dal lato sinistro e 200 pixel verso il basso dall'alto.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px 200px;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

Produrrà il seguente risultato:

Imposta l'allegato in background

Lo sfondo allegato determina se un'immagine di sfondo è fissa o scorre con il resto della pagina.

L'esempio seguente mostra come impostare l'immagine di sfondo fissa.

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
         }
      </style>
   </head>

   <body>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
   </body>
</html>

Produrrà il seguente risultato:

L'esempio seguente mostra come impostare l'immagine di sfondo a scorrimento.

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-attachment:scroll;
         }
      </style>
   </head>

   <body>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
   </body>
</html>

Produrrà il seguente risultato:

Proprietà di stenografia

È possibile utilizzare la proprietà background per impostare contemporaneamente tutte le proprietà dello sfondo. Ad esempio:

<p style = "background:url(/images/pattern1.gif) repeat fixed;">
   This parapgraph has fixed repeated background image.
</p>