CSS ļauj piešķirt fonu gandrīz visiem HTML elementiem — gan vienkāršu krāsu, gan attēlus, gan gradientus. Izvēloties fonu, vienmēr jāpārliecinās, ka teksts uz tā ir skaidri salasāms.

Lai norādītu fonu visai lapai, to uzstāda body elementam:

body {
    background-color: #f5f5f5;
}

Fona krāsa

background-color: #2c3e50;
background-color: rgba(0, 0, 0, 0.8); /* ar caurspīdīgumu */
background-color: transparent; /* caurspīdīgs */

Fona attēls

background-image: url('fons.jpg');

Atkārtošanās

background-repeat: repeat; /* atkārto abos virzienos (noklusējums) */
background-repeat: repeat-x; /* atkārto tikai horizontāli */
background-repeat: repeat-y; /* atkārto tikai vertikāli */
background-repeat: no-repeat; /* neatkārto */

Pozīcija

background-position: center center;
background-position: top right;
background-position: 50% 50%;

Izmērs

background-size: cover; /* aizpilda visu elementu, saglabājot proporcijas */
background-size: contain; /* ietilpina elementā, saglabājot proporcijas */
background-size: 200px 150px; /* konkrēts izmērs */

Piestiprināšana

background-attachment: scroll; /* ritinās kopā ar lapu (noklusējums) */
background-attachment: fixed; /* paliek vietā, kad lapu ritina */

Saīsinātā background īpašība

Visas fona īpašības var apvienot vienā rindiņā:

background: #2c3e50 url('fons.jpg') no-repeat center center / cover;

Gradienti fonā

CSS3 ļauj veidot gradientus bez attēliem:

/* Lineārs gradients */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Radiālais gradients */
background: radial-gradient(circle at top left, #3498db, #2c3e50);

/* Vairākkrāsu gradients */
background: linear-gradient(to right, #e74c3c, #f39c12, #2ecc71);

Vairāki foni

Elementam var piešķirt vairākus fona slāņus, atdalot ar komatu:

background:
linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),
url('foto.jpg') center/cover no-repeat;

Šajā piemērā virs fona attēla tiek uzlikts tumšs caurspīdīgs slānis, lai teksts uz tā būtu labāk salasāms.

Padoms par fona attēlu izmēriem

Fona attēliem jābūt optimizētiem — liels lapas fons nedrīkstētu pārsniegt 100–200 KB. Var izmantot modernos formātus (WebP, AVIF), lai samazinātu faila izmēru.